طراحی رابط کاربر

[Kambiz]

در اکثر موارد وقتی که کاربری برنامه‌ای رو برای اولین بار اجرا می‌کنه٬ اگر به هر دلیلی رابط کاربر (User Interface) برنامه مورد پسندش قرار نگیره دیگه فرصت اجرای دوباره‌ای به برنامه نمیده و یک راست میره سراغ برنامه‌ی مشابه دیگه‌ای که رابط کاربرش راه دستش باشه و حق هم با کاربره. کاربر کاری به این نداره که برنامه شما چقدر توانایی داره و اون یکی چقدر٬ براش مهم اینه که با اون یکی برنامه زندگی براش راحتتره.

کاربر می‌خواد وظایفی رو به کمک برنامه سریعتر و بهتر انجام بده و در ذهنش هم الگوهایی برای انجام این وظایف داره. از طرفی برنامه هم طبق قوانین و اصول خودش دستورات رو می‌گیره تا وظایف خواسته شده رو به انجام برسونه. هر چقدر ما بتونیم تعابیر برنامه (Program Model) رو به تعابیر کاربر (User Model) نزدیکتر کنیم٬ رابط کاربر مناسبتری برای برنامه ایجاد کردیم.

برای این منظور کافیه که اصول ساده زیر رو در زمان طراحی رابط کاربر در نظر بگیریم:


سادگی
خیلی از کاربران از کار با کامپیوتر وحشت دارند. حتی بسیاری از کاربرانی که با کامپیوتر آشنایی کافی دارند٬ هنوز این وحشت رو هنگام کار با یک نرم افزار جدید تو خودشون احساس می‌کنند. هر چقدر رابط کاربر برنامه پیچیده‌تر باشه٬ این وحشت بیشتره. علاوه بر این وقتی کاربری قصد استفاده از یک برنامه رو داره٬ هدفش اینه که کارش رو سریعتر راه بندازه نه اینکه مجبور بشه کلی چیزهای جدید یاد بگیره یا اینکه بره یک دوره آموزشی ببینه تا بتونه از برنامه استفاده کنه.

• اقلام و عملکردهای اضافی رو حذف کنید.
  هر چی اقلام روی صفحه بیشتر باشه یا منوها تو در تو و بزرگتر باشند٬ عملکرد برنامه پیچیده‌تر به نظر میاد.
• تعداد انتخابها (Options) رو کاهش بدید.
  هر گزینه‌ای رو که در برابر کاربر قرار می‌دید بابتش کاربر باید فکر کنه و راجبش تصمیم بگیره. این وظیفه طراح رابط کاربره که بهترین تصمیم رو بجای کاربر بگیره.
• اقلام مرتبط به هم رو دسته بندی کنید.
  با دسته بندی کردن اطلاعات کاربر راحتتر می‌تونه رابطه بین اقلام رو بفهمه. جدا از اینکه با دریافت مفهوم یک قلم٬ درک مفاهیم اقلام مرتبط به اون راحتتره. همچنین سعی کنید تا اونجا که امکان داره هر زمان فقط گوشه‌ای از این اقلام رو به کاربر نشون بدید. برای این منظور استفاده از Page Control یا Tab Control بهترین انتخاب شماست.
• جملات را ساده و کوتاه انتخاب کنید.
  می‌دونیم که اکثریت کاربران دفترچه راهنما یا راهنمای آنلاین برنامه رو نمی‌خونند. البته بیشتر ما هم به همین دلیل این دو قلم رو از برنامه‌هامون حذف می‌کنیم. جالبه بدونید که اکثر کاربران حتی پنجره‌های پیام (Message Box) برنامه رو هم نمی‌خونند. پس سعی نکنید که پیامهای زیادی به کاربر نشون بدید و اگر واقعا لازمه که کاربر چیزی رو بدونه حتی‌الامکان جمله رو کوتاه کنید. هر چی جمله کوتاه‌تر باشه شانس اینکه کاربر بخوندش بیشتره. به همی دلیل حتی کلماتی مانند "لطفا" و "خواهشمند است" رو از پیامهاتون بردارید.

تشابه سازی
برای کاربر راحتترین چیز اینه که بدون فکر کردن و از روی عادت کاری رو که می‌خواد انجام بده. برای این منظور باید رابط کاربر رو جوری طراحی کرد که کاربر با استفاده از اون چیزهایی که تو دنیای واقعی ملکه ذهنش شده راه خودش رو به سادگی تو برنامه پیدا کنه.

• به دستورات تصویری مناسب نسبت بدید که گویای عملکرد دستور باشه.
  یک تصویر گویای هزار حرفه ولی بخاطر داشته باشید که نبود یک تصویر بهتر از بودن یک تصویر نامناسبه. قراره این تصویر راهنمای کاربر باشه نه باعث گمراهی اون.
• از اقلامی استفاده کنید که خودشون انجام کاری رو از کاربر طلب می‌کنند.
  به عنوان مثال یک دکمه فشاری (Puch Button) با اون ظاهر برجسته‌ای که داره٬ داد می‌زنه که باید روی من فشار بدید.

سازگاری
هیچوقت فکر نکنید که برنامه شما اولین برنامه‌ای هست که کاربر قراره تو زندگیش اجرا کنه. بطور حتم کاربر با برنامه‌های دیگه‌ای هم آشنایی داره و انتظار داره اون چیزهایی رو که قبلا دیده و یاد گرفته تو این برنامه جدید هم قابل استفاده باشند. نوآوری چیز خوبیه ولی اولین هدف در طراحی یک رابط کاربر٬ آسودگی کاربره نه هنر و خلاقیتی که در پشت رابط کاربر نهفته شده.

• رابط کاربر رو طبق استانداردهای موجود در سیستم عامل پیاده کنید.
  کاربر انتظار داره همونجور که بقیه برنامه‌ها رو کنترل می‌کنه٬ برنامه شما رو هم کنترل کنه. به عنوان نمونه در برنامه‌های ویندوز دکمه تایید همیشه پیش از دکمه انصراف قرار داره٬ پس برنامه ویندوز شما هم باید این اصل رو رعایت کنه.
  
• با توجه به نوع برنامه٬ از برنامه‌های معروف و پرطرفدار دیگه الگوبرداری کنید.
  به عنوان نمونه اگر قصد دارید یک ویرایشگر متن بنویسید٬ ببینید کلیدهای میانبر (Shurtcuts) روی مایکروسافت ورد چی تعریف شده و همونها رو استفاده کنید. درسته که ممکنه اشتباهاتی در رابط کاربر این برنامه‌ها وجود داشته باشه٬ ولی در نظر بگیرید که میلیونها نفر دارند از این برنامه‌ها استفاده می‌کنند و به رابط کاربر آنها عادت کردند. جدا از اینکه این شرکتها کلی پول و وقت بابت طراحی رابط کاربر برنامه‌هاشون می‌گذارند و من و شما توان انجام اون رو نداریم.

دستیابی پذیری
همه کاربران نمی‌تونند از موش (Mouse) استفاده کنند. حالا می‌تونه دلیلش این باشه که کاربر کامپیوتر کیفی داره و به جای موش از Trackball یا Trackpad یا اون چیز کوچیکی که نمی‌دونم اسمش چیه و وسط صفحه کلید قرار داره استفاده می‌کنه٬ یا اینکه از آرتروز مچ رنج می‌بره یا اینکه دستش لرزش داره یا خلاصه هر ناتوانی دیگه. در هر صورت کاربر یا اصلا نمی‌تونه از موش استفاده کنه یا اینکه دقت لازم برای کنترل اون رو نداره.

• محدوده‌ای رو که کاربر روی اون می‌تونه با موش عمل کنه کوچیک انتخاب نکنید.
  اینجوری حتی کسانی که یک موش خراب و بدون دقت دارند یا از ابزارهای کم دقت دیگه به جای موش استفاده می‌کنند٬ میتونند از قابلیت برنامه شما بهره ببرند.
  
• برای هر عملی که با موش قابل اجرا هست٬ معادل صفحه کلید هم در نظر بگیرید.
  بارها شده موشم خراب شده و برنامه‌ای هم که باهاش کار داشتم به هیچ طریق با صفحه کلید راه نمی‌اومده. نتیجه اینکه برنامه نویس یا بهتره بگم طراح رابط کاربر برنامه رو مورد لعن و نفرین قرار دادم. البته اخیرا زرنگ شدم و یک موش یدکی هم دارم.

زیبایی٬ یکپارچگی و خوانایی
برخی از کاربران بینایی ضعیفی دارند که باید در زمان طراحی رابط کاربر مشکلات آنان را در نظر داشته باشید. همچنبن بطور متوسط نیمی از کاربران به زیبایی برنامه بیش از کارآیی برنامه اهمیت می‌دهند و نکته جالب اینکه عده‌ معدودی از کاربران با دیدن برنامه شما سعی می‌کنند تا شخصیتی از شما در ذهن خود مجسم کنند. پس زیبایی را هم نباید فراموش کرد.

• اقلامی که در عملکرد مشابه هستند باید یکسان دیده شوند.
  مفاهیم مشابه با ظاهری متفاوت حاصلی جز گیج کردن کاربر ندارد. به عنوان نمونه اگر در تمام پنجره‌ها کلیدهای تایید و انصراف وجود داره٬ اندازه و محل قرار گیری آنها بر روی هر پنجره باید مشابه پنجره دیگه باشه. علاوه بر این باید عناوین هم مشابه باشه٬ نه اینکه یکجا از عناین "قبول" و "لغو" استفاده کنیم و در جای دیگه از "تایید" و "انصراف".
  
• فاصله بین اقلام را یکدست و مناسب انتخاب کنید.
  تو در تویی اقلام باعث ناخوانایی آنها می‌شود. فراموش نکنید که بعضی از کاربران دارای مشکلات بینایی هستند و ممکن است نتوانند اقلام نزدیک به هم را از هم تفکیک کنند. همچنین اولین چیزی که در پیش چشم یک فرد حساس به ترتیب ظاهر می‌شود فاصله‌هاست٬‌ حتی اگر تنها یک نقطه تفاوت فاصله وجود داشته باشد.
  
• برای اقلامی که درون یک ظرف (Container) قرار می‌گیرند٬ با دیواره‌ی ظرف حاشیه‌ای مناسب در نظر بگیرد.
  این حاشیه باعث خواناتر شدن اقلام و همچنین زیباتر شدن محتوی می‌شود.
  
• قلم نمایش را مناسب و یکسان انتخاب کنید.
  مشکلات بینایی برخی کاربران ایجاب می‌کند که قلم نمایش (Font) را تا حد معقول بزرگ و خوانا انتخاب کنید. همچنین سعی کنید انتخاب خود را در همه جا یکسان نگهدارید. استفاده از قلمهای متفاوت برای یک منظور مثل این است که نامه‌ای را با ترکیبی از مداد٬ خودکار٬ خودنویس و ماژیک بنویسید.

امیدوارم که عمل به این توصیه‌ها کمک کنه تا مشتریهای بیشتری برای برنامه‌هاتون پیدا کنید.

کامبیز

[مهدی کرامتی]

توصیه های بسیار کاملی است. من همیشه به این موارد عقیده داشته‌ام و همیشه هم چنین توصیه‌هایی به دوستام کرده‌ام.
نتیجه‌ای هم که همیشه از عمل به این نکات گرفته‌ام چیزی نبوده غیر از موفقیت.

آقا کامبیز،
تایپ کردن چنین مقاله‌ای خودش کلی وقت و انرژی میبره، چه برسه به نوشتن و یا ترجمه‌اش. میدونم که خیلی زحمت کشیده‌ای (مثل همیشه). واقعا ازت متشکرم که اینهمه برای جمع زحمت میکشی. کار شما و امثال شما رو با هیچ چیزی نمیشه جبران کرد.
دوستان دیگری هم تو این سایت هستند که برای بقیه زحمت زیادی میکشند (چون میترسم اسم کسی از قلم بیافته ترجیح میدم اسم نبرم). از همه شما متشکرم.

[Kambiz]

خواهش می‌کنم. تنها کافیه که یک نفر به این توصیه‌ها عمل کنه تا حق‌الزحمه تایپ کردن من داده شده باشه. :)

جدا از شوخی٬ این وظیفه تک تک ماست که اون چیزی رو که به واسطه مطالعه یا تجربه بدست آوردیم در اختیار همدیگه قرار بدیم. وقتی که همگی دوستانه به هم کمک ‌کنیم باعث میشه که همه زندگی بهتر و شادتری داشته باشیم.

من هم از همه دوستانی که در این جمع هستند ممنونم. چه اونهایی که پرسشی رو پاسخ می‌دهند یا مطلبی رو می‌نویسند٬ و چه اونهایی که با پرسشهاشون باعث پویایی این جمع می‌شند&#1644.

و از همه مهمتر ممنونم از کسانی که چنین محیطی رو ایجاد کرده‌اند و به پیش می‌برند (من هم اسمی نبردم :wink:).

[(امید)]

با سلام

آقا کامبیز به مطالب فوق العاده مفید و ظریفی اشاره کردین.
منم از زحمتی گه گشیدید بی اندازه متشکرم( همینطور از دوستانی که سعی در کمک به سایت و امثال من دارند ( منم اسم نمی برم :wink: ) )

[Mohammad_Mnt]

آقای کرامتی ، این شکلک " تشویق " کجاست . من این رو خیلی احتباج دارم ، مخصوصا" واسه آقا کامبیز :mrgreen:
پس :تشوبق: :wink:

[jirjirakk]

:: آقا کامبیز تشکر مطالب واقعا جالبی بودش
:: منم تشویق ::

[SoheilKH]

واقعا عالی و مفید بود ای والله .. :lol:

[Behzad_Asharkhan]

همیشه فکر کردن به اینکه چطور یه برنامه به بهترین و زیباترین حالت میتونه همه کارهای مورد نظر کاربر را انجام بده خیلی وقتمو گرفته و معمولا چون همه موارد به فکرم نرسیده بعد از مدتی مجبور شدم شکل چیده شدن و یا تعداد کنترلهای بعضی قسمتها رو تغییر بدم.
خیلی ممنون از اینکه تجربیات خودتون رو در اختیار دیگران قرار دادید. متن شما واقعا خوب و کامله. من ازش پرینت گرفتم و تصمیم دارم همه موارد را رعایت کنم. :wink:

[nematia]

من که یکی از برنامه های در حال تهیه را با خوندن این نوشته ها کاملا عوض کردم. ممنون.

[Kambiz]

ممنونم از همه دوستان و خوشحالم از اینکه مطلبم مورد استقبال و استفاده شما عزیزان قرار گرفته.

راستش رو بخواید باعث و بانی نوشته شدن این مطلب علی (مشاطان) بود که ازش تشکر می‌کنم.

[sql_qassem]

اولا ممنونم
ثانیا:‌بنده پیشنهاد می دم یک گروه با عنوان Interface که یک بحث خیلی مهمه ایجاد بشه و در آن انواع مطالب و نمونه ها ارائه بشه .
متشکرم
SQL 8)

[said ali]

با سلام
اقای دلفی اسیستنس میشه این پیشنهاد رفیقمو SQL یه جوری عملی بشه چون نمونه یه چیز دیگه است ویه جور استفاده از گفته های دلفی اریا عزیز رو عملی بیان میکنه البته ذکر نکات جای تقدیر خودشو داره.

[marandi]

دوستان عزیز سلام
با طرح اولیه برادر عزیزمون، حقیر نیز پیشنهادی را در جهت تاسیس بخش استانداردهای برنامه نویسی دادم که با عنایت مدیر سایت سرانجام گرفت. در این بخش شما می توانید در کل با استاندارد های برنامه نویسی آشنا شوید.
لطفا به این بخش هم سری بزنید و البته تجارب خودتون هم از دیگران دریغ نکنید

[SReza1]

اقا کامبیز شما واقعا کارت درسته!!
حرفه حساب همینه دیگه :wink:

[faeghi]

ممنون از شما مقاله بسیار جالب و کار آمدی بود

[vahdat86]

با سلام
اقا کامبیز به یه نکته ای اشاره کردی که کمتر کسی یه اون توجه داره تو طراحی برنامه و به جرات میتونم بگم که یکی از کلیدی ترین نکات طراحی برنامه ها رو اشاره کردی که هر فرد برنامه نویس بدون لحاظ نمودن این نکات جنابعالی جدا تو کارش ناموفقه
در عین حال یه دنیا ازت ممنون و متشکرم جدا گل کاشتی.خدا بهت اجر عنایت بفرماید

[golihaghighi]

دوستان توجه کنید تاپیک مربوط به سال 82 است.