نکاتی که در این پست معرفی خواهند شد از مهمترین های اصول طراحی رابط کاربری در حوزه اپلیکیشن می باشند. رعایت این اصول می تواند به استاندارد شدن هر چه بیشتر برنامه کمک کرده و رضایت و راحتی را برای شما و کاربران فراهم آورد. در ادامه با تعدادی از این اصول آشنا خواهیم شد :)


  • از دکمه‌ها، آیکونها، کادرها و تصاویر زیبا استفاده کنید. اگر بخواهید با مد روز جلو بروید پس باید یا از طراحی مینیمال استفاده کنید یا طراحی تخت که ویندوز 8 مایکروسافت از آن بهره برده است


  • هیچگاه آیکونهای موجود و دردسترس خود را بین دکمه‌های گرافیکی و Toolbar تقسیم نکنید، بلکه با توجه به محتوا و کار آن دکمه، به دنبال زیباترین و بهترین آیکون جستجو کنید. برای پیدا کردن آیکن های مورد نظر برنامه Metro Studio را معرفی می کنم که به جرات یکی از بهترین و کاملترین بانک های آیکن به شمار میرود


  • از امتحان کردن ترکیب رنگهای متفاوت ترسی نداشته باشید (از رنگهای لایت و ملایم استفاده کنید). ایده جذاب و مناسب به راحتی خلق نخواهد شد.


  • اصوات را فراموش نکنید (یعنی نه کاملا). هرچند که تا کنون کمتر برنامه‌نویسی را دیده‌ام که به ایجاد اصوات و جلوه‌های صوتی سفارشی برایDesktop Application خود فکر کند، اما اصوات مناسب و بجا، زیبایی خاصی به برنامه خواهند داد. (البته ممکن است کاربر مذکور پس از شنیدن اصوات مورد نظر، تصور کند که EasterEgg برنامه شما را پیدا کرده است). همچنین سعی کنید از استفاده بیش از اندازه در این مورد بپرهیزید، مثلاً اگر در برنامه شما چندین دکمه وجود دارد و همه آنها تقریباً کار یکسان و مشابهی انجام می دهند انتخاب یک صوت مشابه و مناسب برای همه آنها کافی است و این کار می تواند یک راهنمایی برای کاربر باشد


  • در صورت امکان (با توجه به محتوای برنامه) از پوسته (Skin) استفاده کنید. البته منظور من به هیچ وجه استفاده از پوسته‌های عجیب و غریبی که گاها در بعضی از ابزارها و tools ها دیده می‌شوند نیست! فکر نمیکنم هیچ کارمند یا کاربری (ایرانی) تمایل به استفاده از یک برنامه اداری با پوسته MacOS یا Win3.1 داشته باشد. همچنین گرد کردن (اینقدر که گاها دکمه مستطیل را به بیضی تبدیل می‌کنند) و شفافیت بیش از حد دکمه‌ها و فرمها، نتیجه‌ای معکوس خواهد داشت. استفاده از پوسته به شرطی مجاز است که کاربری برنامه را مختل نکند


  • کاربر بیچاره باید بتواند فرق بین یک Checkbox یا RadioButton انتخاب شده و انتخاب نشده را تشخیص بدهد. باید بتواند یک کنترل غیرفعال (Disable) را از روی رنگ آن تشخیص بدهد. پس لطفا از Skin های بدرنگ و عجیب پرهیز کنید


  • در صورت لزوم از فضای Titlebar هم استفاده کنید. مثلا ایجاد دکمه‌ای برای دسته بندی موضوعی اعمال مهم برنامه، یا AlwaysOnTop و غیره. البته این روش بیشتر در مورد برنامه‌هایی با مخاطب خاص توصیه میشود. مثلا در یک برنامه مدیریتی، مهندسی، صنعتی سطح بالا و ... که تعداد کنترلهای موجود و ضروری در یک صفحه خیلی زیاد باشد، وجود یک دکمه میانبر در Titlebar میتواند راهگشا باشد. (البته شکل و رنگ آن، تضادی با نمای Titebar نداشته باشد)


  • خود را به استفاده از کادرهای محاوره‌ای استاندارد محدود نکنید. اگر برنامه شما نیاز به یک کادر Open، Save، Save As یا Print با امکانات خاص دارد، خودتان آن را طراحی کنید


  • به عادتهای کاربران در روش تعامل با برنامه‌ها احترام بگذارید. درست است که نوآوری و خلاقیت، لازمه موفقیت هستند، اما اجبار کاربران به دست کشیدن از عادات خود در روش کار با برنامه‌ها، گاها نتیجه مطلوبی نخواهد داشت. به عنوان مثال ممکن است در پرو‌ژه‌ای بهینه‌ترین حالت طراحی یک فرم، انتقال Tab Control به سمت راست (عمودی) یا پایین و یا AddresBar در کنار StatusBar باشد، اما آیا بهینگی ترکیب‌بندی فرم، ارزش نارضایتی کاربر از UI را دارد


  • با توجه به پیچیدگی برنامه و سطح مخاطب، در مورد وجود Hint در کنترلها تصمیم بگیرید


  • وقت کاربر را تلف نکنید. آیا واقعا نیازی هست که نمایش Splash Screen ده ثانیه طول بکشد. شاید بهتر باشد Splash را حذف کرده و در عوض لوگوی خود را با شکلی ساده در پس زمینه برنامه قرار بدهید. (اگر ممکن نبود، به اعلام وجود در صفحه About قانع باشید). اگر برنامه از لحاظ بارگذاری زمان زیادی را مصرف می کند می توانید لوگوی برنامه را تا بارگذاری کامل به نمایش بگذارید


  • تا جای ممکن از فرمهای Fullscreen پرهیز کنید (خصوصا Fullscreen+AlwaysOnTop). به خاطر داشته باشید برنامه شما یک Application است نه یک OS


  • در تغییر فونتهای پیشفرض نمایش برنامه، خلاقیت به خرج ندهید. اصولا فونت Tahoma برای انواع متنهای فارسی و انگلیسی، بارها امتحان خود را با موفقیت پس داده است. البته جدیداً فونت BYekan هم توانسته نظر کاربران را به خود جلب کند (برای نمایش عناوین بخش های مختلف برنامه می توان از این فونت استفاده کرد)


  • استفاده از خاصیت Align و Anchors در کنترلها به منظور قابلیت Resize و همچنین استفاده از Panel و Splitter برای جابه‌جایی پذیری اقلام، ضروری هستند. به یاد داشته باشید که برنامه شما، با تغییر وضوح صفحه (Resolution) کارایی خود را از دست ندهد


  • در انتخاب محتوای MessageDialog ها میانه‌روی کنید. نه آنقدر متن را کوتاه کنید که مفهوم Dialog بودن زیر سوال برود و نه آنقدر طولانی و تخصصی که گویا فقط مهندسین نرم‌افزار کاربر آن برنامه هستند. (مثلا نیازی به اعلام خطا در کار با ConnectionString به کارمند اداره پست وجود ندارد)


  • شیوه راهبری (Navigation) برنامه و مسیر کلیکهای کاربر را بهینه کنید. دکمه‌ها، کادرها یا گزینه‌های پرکاربرد می‌بایست در نزدیکی یکدیگر قرار بگیرند


  • حتما از میانبرهای صفحه کلید (Shortcut keys) استفاده کنید. تمام دکمه‌ها و کنترلها باید Tab پذیر و قابل Focus باشند. به یاد داشته باشید که کاربران حرفه‌ای بیشتر از صفحه کلید استفاده می‌کنند تا موشواره


  • اگر از شیوه "تک فرمی" و "محوریت برنامه بر روی یک فرم" استفاده میکنید (مثلا وجود یک فرم اصلی (Main) که جداول (Grids) و کنترلهای درون آن به شکل پویا تغییر می‌کنند) میبایست متنی را برای اعلام موقعیت فعلی کاربر در نظر بگیرید. به عبارتی، کاربری که تازه از راه رسیده، باید بتواند تشخیص دهد که Grid موجود در صفحه، اقلام کالای انبار را نمایش می‌دهد یا اجناس فروخته شده را


  • طراحی واسط را یک کار ساده و پیش پا افتاده تلقی نکنید، در صورت امکان با یک گرافیست یا طراح در مورد ترکیب بندی و رنگ‌بندی UI مشورت کنید


  • در صورت امکان بهتر است خود آن گرافیست یا طراح با توجه به نظرات شما، واسط کاربری را طراحی نماید. بالاخره هر کاری را باید به دست متخصص آن سپرد. (قرار نیست هر کدنویسی، طراح هم باشد)


  • اگر فکر میکنید که یک طراح هم هستید، حتما قبل از شروع طراحی در محیط توسعه، ابتدا واسط کاربری را بر روی کاغذ ترسیم کنید. به این منظور از انوع کاغذهای Storyboard یا شطرنجی موجود میتوان استفاده نمود. همچنین بخش طراحی UI در Visio کمک زیادی به شما خواهد کرد


  • طراحی واسط کاربری بر روی کاغذ به شکل شگفت‌آوری مشکلات و نارسایی‌های UI در تعامل با کاربر را نمایان خواهد ساخت

pcpedia


مطالب مشابه: