چگونه یک رابط کاربری مناسب و استاندارد طراحی کنیم؟

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

به علت طولانی بودن مطلب، این مقاله را می توانید در قالب PDF دانلود کنید +
برای داشتن یک طراحی خوب در زمینه رابط کاربری، ابتدا باید کاربران نرم افزار را شناسایی کنید، سن، سطح سواد، نیازها و کارهایی که می خواهند با نرم افزار انجام بدهند را در نظر بگیرید. به طور مثال وقتی می خواهید نرم افزاری برای گروه سنی کودکان تولید کنید باید طراحی را با توجه با سن کاربران انجام دهید. پس از مشخص کردن کاربران و مشخصات آنان، سناریوهای هر کاربر را که در بخش تحلیل ایجاد شده اند را مورد بررسی قرار دهید و Use caseهای هر کاربر را در نظر بگیرید تا مجموعه ای از اشیاء و اعمال مربوط به آن ها مشخص شوند. این اجزاء معمولاً مبنایی برای ایجاد صفحات (منظور از صفحه، هر جزئی از رابط کاربری است که یکسری اجزای مربوط به هم را در کنار هم قرار می دهد، نه فقط صفحات وب) رابط کاربری می شوند که شامل طراحی گرافیکی، آیکون ها، متن ها، توضیحات صفحه و منوها می باشد.

office2007windows
خیلی از مدیر پروژه های شرکت های نرم افزاری در ایران، طراحی رابط کاربری را امری پیش پا افتاده می دانند و ایجاد آن را هم به دست برنامه نویسان می سپارند. همین که رابط کاربری، ظاهری جذاب و زیبا داشته باشد برای آنان کافی است. این ها هر چه می توانند از تصاویر گرافیکی و کامپوننت های UI برای ایجاد ظاهر زیبا در نرم افزارهایشان استفاده می کنند تا در نظر کاربر نرم افزارشان حرفه ای به نظر آید. درست است که زیبایی یکی از فاکتورهای مهم یک رابط کاربری خوب است اما همه چیز نیست. در اینجا به برخی از اصول طراحی رابط کاربری خوب اشاره می کنیم :

  • استفاده از عنوان های با معنی برای اجزای صفحه : برای اجزای رابط کاربری خود عنوان های مناسبی انتخاب کنید تا کاربر منظورتان را با یک نگاه بفهمد. برای منو ها و دکمه ها عنوان های با معنی بگذارید که کاری که انجام می دهند را در یک یا دو کلمه توصیف کند. عنوان های بی معنی و طولانی برای کاربران ناخوشایند هستند.
  • استفاده از آیکون های مناسب و با معنی : هرجایی که قرار است از آیکون استفاده کنید، به جز زیبایی ظاهر آن، به اندازه آن در واحد پیکسل و با معنی بودن آن هم توجه کنید. آیکون ها باید نماد مشخصی از تابعی باشند که قرار است آن را صدا بزنند. هرجا که می توانید به جای منوها از شکلک ها استفاده کنید، چون کاربران ارتباط بهتری با شکلک ها برقرار می کنند تا منوهای تو در تو.
  • جزئیات تکنیکی از دید کاربر پنهان باشد : شما نباید کاربر را درگیر مسائل تکنیکی کنید، حتی اگر این مسایل از نظر شما مسایل راحت و پیش پا افتاده ای باشند. به طور مثال شما نباید کاربر را مجبور کنید که یک کلید خاص را در رجیستری ویندوز انتخاب کند!
  • در هر صفحه پیش فرض هایی داشته باشید : در هر صفحه باید چند عمل پیش فرض برای کاربر تعریف کنید. اگر در حال گرفتن اطلاعات از کاربر هستید، باید دکمه پیش فرضی برای کاربر قرار دهید که با کلیک روی آن تمام اطلاعات آن فرم پاک یا به اصطلاح Reset شود. یا به طور مثال دکمه های تایید یا OK در خیلی از فرم ها به عنوان پیش فرض آن فرم قرار داده می شوند تا کاربر با زدن دکمه Enter قادر به اجرای تابع مورد نظر باشد.
  • کاهش بار فکری کاربر : هر چه کاربر بیشتر مجبور باشد بخاطر بسپارد، ارتباط او با نرم افزار دارای خطای بیشتری خواهد بود. یک رابط کاربری مناسب به حافظه کاربر متکی نیست. هر زمانی که لازم شد، نرم افزار باید اطلاعات مورد نیاز را ذخیره کند و به هنگام نیاز آن اطلاعات را به کاربر یادآوری کند.
  • تعریف کلیدهای میانبر : سعی کنید کلیدهای میانبر مناسبی برای توابع پرکاربرد موجود در نرم افزار ایجاد کنید. این کلیدهای میانبر باید با اعمالی که قرار است انجام دهند به گونه ای مرتبط شوند که بخاطر سپردن آن ها توسط کاربران آسان باشد. برای مثال کلید Ctrl به علاوه حرف اول عنوان تابع مورد نظر. اگر برای کاری کلید میانبر استانداردی وجود دارد (مثل Ctrl+C برای کپی)، همان را استفاده کنید، چون عوض کردن این گونه کلیدها باعث سردرگمی کاربران می شود.
  • رابط کاربری را بر اساس دنیای واقعی مدل کنید : به طور مثال برای ثبت فاکتور در یک سیستم فروش، سعی کنید صفحات شبیه به فاکتورهای واقعی طراحی شوند. این کار باعث می شود که کاربر احساس راحتی با نرم افزار شما کند.
  • اطلاعات را به تدریج نمایش دهید : اگر قرار است اطلاعات گوناگون و حجیمی را به کاربر نمایش دهید، ابتدا آن را در بالاترین سطح مجردسازی به کاربران نمایش دهید. جزئیات بیشتر باید به علاقه کاربر و با دستور او ارائه شوند.
  • فراهم نمون ارتباط قابل انعطاف : چون کاربران مختلف علایق گوناگون و سطح آشنایی متفاوتی با کامپیوتر دارند وجود انتخاب نحوه ارتباط ضروری است. نرم افزار باید به کاربر امکان دهد که از ماوس، صفحه کلید، قلم دیجیتالی یا حتی دستورات صوتی برای اجرای کارهای مختلف بهره بگیرد.
  • کارهای طولانی باید وقفه پذیر باشند : کاربر باید بتواند اعمال در حال اجرای طولانی را متوقف کند. کاربر باید از زمان اجرای یک کار آگاهی داشته باشد تا بتواند بهتر در مورد اجرا یا عدم اجرای آن کار تصمیم بگیرد. مثال ساده این عمل را در کپی کردن فایل ها دیده اید، کاربر از زمان اجرای عمل باخبر است و هرگاه که تصمیم بگیرد می تواند آن را متوقف کند.
  • کارهای حساس باید برگشت پذیر باشند : ممکن است کاربر عملی را به اشتباه انجام دهد و نیاز داشته باشد آن عمل اشتباه را لغو کند. نرم افزار باید چنین امکانی را در کارهای حساس به کاربر ارائه کند. به طور مثال در ویرایشگرهای تصویر، اگر به اشتباه جایی از تصویر را خراب کنید، به راحتی با یک عمل Undo می توانید اشتباه خود را جبران کنید.
  • رابط کاربری باید یکنواخت باشد : علاوه بر رعایت استانداردهای معمول یک رابط کاربری، شما بایستی استانداری برای طراحی رابط خود تعریف کنید تا تمام صفحات رابط شما از یکنواختی مشخصی برخوردار باشند. رابط کاربری شما باید اطلاعات را به صورت یکنواخت نمایش دهد یا دریافت کند. این کار باعث می شود تا کاربر با صفحات جدیدی که برایش باز می شوند نا آشنا نباشد و با آن ها راحت کار کند.

gmail-web

حتماً عوامل موثر دیگری هم در ایجاد رابط کاربری مناسب و استاندارد وجود دارند که در این مطلب به آن ها اشاره نشد. موضوع مهمی که حتماً باید در نظر بگیرید، پلت فرمی است که قرار است نرم افزار شما روی آن کار کند. به طور مثال اگر نرم افزار شما تحت وب است طراحی شما شرایط متفاوتی با یک نرم افزار تحت دسکتاپ دارد. هر چند که مسایل بالا هم در نرم افزارهای تحت وب قابل پیاده سازی است و هم در نرم افزارهای تحت دسکتاپ. همچنین طراحی رابط کاربری در سیستم عامل های مختلف نیز تفاوت های زیادی با هم دارند. در این مطلب ما به صورت Abstract و جدا از پلت فرم به مسئله طراحی رابط کاربری نگاه کردیم.
مثال هایی از رابط کاربری استاندارد در نرم افزارهای امروز را می توان Gmail در وب، Office 2007 در ویندوز و فایرفاکس در لینوکس عنوان کرد.

دریافت این مقاله در قالب PDF

مطالب مرتبط :

می توانید برای مطلع شدن از مطالب جدید فراسان، مشترک فید آن شوید!

بیایید با هم WPF یاد بگیریم!

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

ظاهر فرم های وب با استفاده از کدهای HTML و CSS ایجاد می شوند و مرورگر وب وظیفه رندر کردن این صفحات وب را بر عهده می گیرد. در فرم های ویندوز ظاهر فرم با استفاده از کامپوننت ها و کنترل های نرم افزاری شکل می گیرد و کتابخانه های GDI و فایل USER32.dll در زیر سیستم گرافیکی ویندوز وظیفه رندر کردن ویندوز فرم ها را بر عهده دارند. رابط کاربری را از دو نظر می توان مورد بررسی قرار داد، از نظر زیبایی و غنی (Rich) بودن. فرم های وب به علت باز بودن دست شما در استفاده از فایل های مالتی مدیا معمولاً زیبایی بیشتری نسبت به فرم های ویندوز دارند. صفحات وب می توانند از فایل های عکس و ویدئو به راحتی استفاده کنند و با استفاده از کدهای CSS ظاهری زیبا داشته باشند. در فرم های ویندوز این زیبایی به راحتی وب بدست نمی آید، اما به جای آن کنترل های غنی بسیار زیادی که برای فرم های ویندوز وجود دارد در وب کمتر یافت می شود. غنی یا Rich بودن یک کنترل به این معنی است که آن کنترل به خوبی به رفتارهای کاربر و رویدادهایی که برایش اتفاق می افتد پاسخ می دهد. البته با آمدن تکنولوژی AJAX فرم های وب تا حدودی در این زمینه بهبود یافته اند.

wpf_logo

Windows Presentation Foundation یا به اختصار WPF زیر سیستم گرافیکی جدید ویندوز است که روشی واحد برای طراحی رابط کاربری غنی و زیبا که می تواند از فایل های مالتی مدیا و افکت های دو بعدی و سه بعدی نیز استفاده کند، به توسعه دهندگان دات نت ارائه می کند. این سیستم جدید روشی فوق العاده قابل انعطاف تر از روشی که در Win32 و فرم های ویندوزی استفاده می شود به شما ارائه می کند. شما با استفاده از زبان XAML که در سیلورلایت هم مورد استفاده قرار می گیرد، رابط کاربری خود را می سازید. زبان XAML بر اساس فرمت XML به شما اجازه ساختن کنترل های WPF را می دهد و استفاده از آن به راحتی HTML خواهد بود.WPF کاملاً رابط کاربری نرم افزار شما را از منطق آن جدا خواهد کرد.

برای ایجاد فرم های WPF باید ویژوال استادیو 2008 را باز کنید و از قمست New / Project گزینه WPF Application را برگزینید. همانطور که در شکل زیر مشاهده می کنید، همانند فرم های ویندوزی، WPF نیز پنجره ای را در اختیار شما قرار می دهد تا کنترل های خودتان را روی آن قرار دهید. این کنترل های را می توان به صورت دستی با کدهای XAML ایجاد کرد و یا از Toolbox ویژوال استادیو روی پنچره قرار داد. با استفاده از این کنترل ها می توانید زیبایی خیره کننده ای به برنامه هایتان ببخشید.

مثالی از WPF

مثالی از WPF

یادگیری تکنولوژی های جدید همیشه برای بسیاری از افراد جالب و هیجان انگیز است و برای برخی هم سخت و دشوار. یادگیری WPF کار مشکلی نیست، فقط باید کمی روی آن وقت بگذارید و تمرین کنید. مقالات آموزشی بسیار زیادی در مورد یادگیری WPF در وب سایت های مختلف پیدا خواهید کرد. حتی می توانید کتاب های زیادی هم در مورد WPF به زبان انگلیسی روی اینترنت پیدا کنید. توجه داشته باشید که مایکروسافت تاکید بسیار زیادی بر روی WPF دارد و رابط کاربری سیستم عامل ویندوز 7 و دیگر نرم افزارهای خود را با استفاده از همین WPF توسعه می دهد. در واقع توصیه مایکروسافت به همه تولید کنندگان نرم افزار، استفاده از WPF در ایجاد رابط کاربری نرم افزارهای نسل آینده است. به احتمال بسیار زیاد هدف بلند مدت مایکروسافت از توسعه WPF حذف فرم های ویندوز و وب در آینده خواهد بود، پس از همین حالا شروع به یادگیری WPF و زبان XAML کنید.

شاید این مطالب هم برای شما خواندنی باشند :

پ.ن 1: اگر وقت اجازه بدهد، حتماً مطالب آموزشی در مورد WPF، XAML و سیلورلایت در این وبلاگ بیشتر مشاهده خواهید کرد.

پ.ن 2: Datefa را به CodePlex منتقل کردم، می توانید آخرین نسخه 2.4 پایدار به همراه سورس کد آن را از این سایت دریافت کنید.

پ.ن 3: مطلب آقای افشار محبی در مورد مفایسه WPF و WinForms برای مطالعه پیشنهاد میکنم.

پ.ن 4: وبلاگ Hyper Web مطالب تحلیلی با کیفیتی در مورد فناوری های روز می نویسد، خواندن این وبلاگ هم پیشنهاد می شود.

ابتدا رابط کاربری را بسازید!

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

معمولاً ما برنامه نویسان یاد گرفته ایم که هر پروژه ای را با نوشتن کدهای پایه شروع کنیم. در واحد های دانشگاهی هم کد نوشتن را به ما یاد می دهند، اما طراحی یک رابط کاربری استاندارد و مناسب را به ما یاد نمی دهند. شاید برای خیلی از برنامه نویس ها طراحی یک رابط کاربری مناسب از کد نویسی هم سخت تر باشد. ایده «ابتدا رابط کاربری را بسازید» می تواند به عنوان یک متد توسعه در پروژه های کوچک مورد استفاده قرار گیرد. این روش در برخی مواقع به صورت چشمگیری زمان و هزینه شما را کاهش و کارایی شما را افزایش می دهد.

users

رابط کاربری که طراحی می کنید، به صورت مستقیم با محیط توسعه و بستر اجرای نرم افزار شما مرتبط است. مثلاً اگر با ویژوال استادیو و برای وب برنامه می نویسید، ابزارها و شرایط متفاوتی با کسی که در حال طراحی یک برنامه ویندوزی با RAD Studio است، دارید. در ابتدا می توانید رابط کاربری را روی یک کاغذ پیاده سازی کنید و به صورت تدریجی آن را تکمیل کنید. می توانید رابط کاربری را همزمان با کدنویسی به صورت موازی توسعه دهید. تست برنامه هم در این حالت در دسترس تر و راحت تر خواهد بود. یادتان باشد که از نظر کاربر، نرم افزار یعنی رابط کاربری. کاربر برنامه شما را با شکل و شمایل آن می شناسد. کاربرچیزی از پشت صحنه نرم افزار شما نمی داند.

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

در هر حال اگر به صورت انفرادی برنامه می نویسید و پروژه های کوچکی دارید، بهتر است برای یکبار هم که شده ابتدا از رابط کاربری شروع کنید و این روش را به کار ببرید.

بیشتر بدانید :

شاید این مطالب هم برای شما خواندنی باشند :

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

چطور مشترک شویم؟