نکاتی در رابطه با طراحی رابط گرافیکی کاربر (GUI)

  • از دکمه‌ها، آیکونها، کادرها و تصاویر زیبا استفاده کنید.
  • هیچگاه آیکونهای موجود و دردسترس خود را بین دکمه‌های گرافیکی و Toolbar تقسیم نکنید، بلکه با توجه به محتوا و کار آن دکمه، به دنبال زیباترین و بهترین آیکون جستجو کنید.
  • از امتحان کردن ترکیب رنگهای متفاوت ترسی نداشته باشید (از رنگهای لایت و ملایم استفاده کنید). ایده جذاب و مناسب به راحتی خلق نخواهد شد.
  • اصوات را فراموش نکنید (یعنی نه کاملا). هرچند که تا کنون کمتر برنامه‌نویسی را دیده‌ام که به ایجاد اصوات و جلوه‌های صوتی سفارشی برای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 برای انواع متنهای فارسی و انگلیسی، بارها امتحان خود را با موفقیت پس داده است.
  • استفاده از خاصیت Align و Anchors در کنترلها به منظور قابلیت Resize و همچنین استفاده از Panel و Splitter برای جابه‌جایی پذیری اقلام، ضروری هستند. به یاد داشته باشید که برنامه شما، با تغییر وضوح صفحه (Resolution) کارایی خود را از دست ندهد.
  • در انتخاب محتوای MessageDialog ها میانه‌روی کنید. نه آنقدر متن را کوتاه کنید که مفهوم Dialog بودن زیر سوال برود و نه آنقدر طولانی و تخصصی که گویا فقط مهندسین نرم‌افزار کاربر آن برنامه هستند. (مثلا نیازی به اعلام خطا در کار با ConnectionString به کارمند اداره پست وجود ندارد)
  • شیوه راهبری (Navigation) برنامه و مسیر کلیکهای کاربر را بهینه کنید. دکمه‌ها، کادرها یا گزینه‌های پرکاربرد می‌بایست در نزدیکی یکدیگر قرار بگیرند.
  • حتما از میانبرهای صفحه کلید (Shortcut keys) استفاده کنید. تمام دکمه‌ها و کنترلها باید Tab پذیر و قابل Focus باشند. به یاد داشته باشید که کاربران حرفه‌ای بیشتر از صفحه کلید استفاده می‌کنند تا موشواره.
  • اگر از شیوه “تک فرمی” و “محوریت برنامه بر روی یک فرم” استفاده میکنید (مثلا وجود یک فرم اصلی (Main) که جداول (Grids) و کنترلهای درون آن به شکل پویا تغییر می‌کنند) میبایست متنی را برای اعلام موقعیت فعلی کاربر در نظر بگیرید. به عبارتی، کاربری که تازه از راه رسیده، باید بتواند تشخیص دهد که Grid موجود در صفحه، اقلام کالای انبار را نمایش می‌دهد یا اجناس فروخته شده را.
  • از تابع AnimateWindow در برنامه‌ای استفاده کنید که کاربران آن به شما نخندند.
  • طراحی واسط را یک کار ساده و پیش پا افتاده تلقی نکنید، در صورت امکان با یک گرافیست یا طراح در مورد ترکیب بندی و رنگ‌بندی UI مشورت کنید.
  • در صورت امکان بهتر است خود آن گرافیست یا طراح با توجه به نظرات شما، واسط کاربری را طراحی نماید. بالاخره هر کاری را باید به دست متخصص آن سپرد. (قرار نیست هر کدنویسی، طراح هم باشد).
  • اگر فکر میکنید که یک طراح هم هستید، حتما قبل از شروع طراحی در محیط توسعه، ابتدا واسط کاربری را بر روی کاغذ ترسیم کنید. به این منظور از انوع کاغذهای Storyboard یا شطرنجی موجود میتوان استفاده نمود. همچنین بخش طراحی UI در Visio کمک زیادی به شما خواهد کرد.
  • طراحی واسط کاربری بر روی کاغذ، به شکل شگفت‌آوری مشکلات و نارسایی‌های UI در تعامل با کاربر را نمایان خواهد ساخت.

About محمد شمس

برنامه‌نویس، طراح انیمیشن و علاقمند به هوش مصنوعی

3 Comments

  1. سلام،

    مطلب خیلی عالی نوشتین دستتون درد نکنه. ممنون برای نظرتون توی توئیکس

  2. سلام
    با اینکه وبلاگتونو کامل نگشتم ولی کامنت هاتون نسبت به مطالب زیبا ومفید تون کمه

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


5 × 2 =