واسط کاربر – User Interface – و استانداردهای آن

داغ:

واسط کاربر
واسط کارب (به انگلیسی: User Interface و به اختصار: UI)‏ یک میانجی بین انسان و ماشین (دستگاه) است که امکان استفاده از ماشین را برای انسان فراهم می‌کند. واسط کاربر، بخش دیدنی و قابل لمس یک ابزار است که کاربر مستقیماً با آن سر و کار دارد. این اصطلاح را میانای کاربر، میانجی کاربرو رابط کاربر هم ترجمه کرده‌اند.
هر واسط کاربر، به دو سازوکار اساسی مجهز است:
• درون‌داد؛ کاربر از طریق واسط کاربر، به ماشین فرمان می‌دهد.
• برون‌داد؛ ماشین از دریچه واسط کاربر، به دستورات کاربر، پاسخ و عکس‌العمل نشان می‌دهد.
در این حالت اصطلاحاً می‌گویند که کاربر و واسط کاربر، با یکدیگر تعامل دارند.

واسط گرافیکی کاربر
در فرهنگ رایانه، واسط گرافیکی کاربر یا واسط نگاره‌ای کاربر، مجموعه‌ای از نشانه‌های گرافیکی نمایش داده شده بر روی یک نرم‌افزار است که در آن کاربر به جای تایپ فرمان‌های بلند و پیچیده از اعلان فرمان، با اشاره بر نمایشهای تصویری بر روی صحنه تصویر، پرونده‌ها، برنامه‌ها یا فرمان‌های گوناگون را انتخاب می‌کند.
به عبارتی ساده‌تر، یک محیط گرافیکی که نرم‌افزارهای رایانه، برای راهنمایی و کاربری بهتر انسان بکار می‌گیرند واسط گرافیکی کاربر نامیده می‌شود. این نما، چگونگیِ روش کاربریِ رایانه را، توسط انسان، بهبود می بخشد و روشی است گرافیکی برای نمایش نرم‌افزار سیستم‌عامل رایانه، به کاربرانش. در رایانه‌های قدیمی‌تر، این نما، مجموعه‌ای بود از نشان‌های تایپی نشان داده شده بر صفحه نمایشگر. در رایانه‌های امروزی اما، نمای گرافیکی کاربری مجموعه‌ای است از نشان‌ها و پس زمینه‌ها و کلیدهایی زیبا و رنگین، برای بهبود رابطه انسان-ماشین در راستای بهبود کاربری کارایی بهتر.
برخی این واژه را «نمای گرافیکی کاربر»، «میانای نگاره‌ای کاربر»، یا «میانجی نگاره‌ای کاربر» هم ترجمه کرده‌اند.
برنامه‌های کاربردی که در ویندوز اجرا می‌شوند، از مجموعه ثابتی از فهرست‌های گزینش عمودی، جعبه‌های محاوره‌ای و سایر عناصر گرافیکی مانند نوارهای مرور (به انگلیسی: scroll bar)‏ و شمایل‌ها (به انگلیسی: icon)‏ استفاده می‌کنند. این ثبات میان عناصر گرافیکی، مزیت عمده‌ای برای کاربر است، زیرا با یادگرفتن نحوۀ کار با رابط می‌تواند از آن در تمام برنامه‌های در حال اجرا در همان محیط استفاده کند.

کاربردپذیری
در طراحی تعامل، کاربردپذیری (به انگلیسی: Usability)‏ شاخصه‌ای است که میزان سهولت کاربری یک ابزار را نشان می‌دهد.
تعریف کاربردپذیری از دیدگاه « سازمان بین‌المللی استانداردسازی »: میزانی که یک محصول می‌تواند توسط کاربران خاصی برای رسیدن به هدفی معین، مورد استفاده قرار گرفته و در حین استفاده، ضمن داشتن اثربخشی و کارایی، رضایت کاربر را در زمینهٔ مورد استفاده تأمین کند.
هدف‌های اصلی در کاربردپذیری عبارتند از.
• کارآمدی یا اثربخشی (Effectiveness)
نشان می‌دهد که یک محصول، چقدر در زمینه مورد استفاده‌اش، مناسب و اثربخش است. خصیصهٔ کارآمدی، به توانایی محصول در برآورده‌کردن نیازهای کاربر اشاره می‌کند.
• کارآیی (Efficiency)
نشان می‌دهد که یک محصول، چقدر به کاربران کمک می‌کند تا عملیات (Task) مورد نظرشان را به انجام برسانند. خصیصهٔ کارآیی، به کیفیت عملکرد محصول در زمان استفاده، و قابلیت‌های آن برای افزایش بهره‌وری اشاره می‌کند.
• ایمنی (Safety)
نشان می‌دهد که یک محصول، چگونه از کاربران در مقابل شرایط خطرناک و وضعیت‌های ناخواسته، محافظت می‌کند. یک محصول خوب، باید از کاربر در برابر عوامل خارجی خطرناک (مثل تشعشع)، یا انجام اعمال ناخواسته به طور اتفاقی، محافظت کرده و در صورت امکان، به قابلیت‌های واگرد (Undo)، و ترمیم (Recovery) و احیا (Restore) نیز مجهز باشد.
• امکانات (Utility)
نشان می‌دهد که یک محصول، چه قابلیت‌های عملیاتی مناسبی را فراهم می‌کند تا کاربران بتوانند آنچه را که می‌خواهند، انجام دهند، یا به آنچه که نیاز دارند، دست پیدا کنند. یک محصول خوب، باید امکانات متنوعی را برای ساده‌کردن و تسریع انجام عملیات‌ها – به روشی که کاربر می‌پسندد – فراهم کند. مثلاً برخی نرم‌افزارها به میان‌برهایی مجهز هستند که انجام یک عملیات طولانی را ساده‌تر می‌کنند.
• آموزش‌پذیری (Learnability)
نشان می‌دهد که آموختن نحوه استفاده از سیستم، چقدر آسان است.
• یادآوردپذیری (Memorability)
نشان می‌دهد که به خاطرآوردن نحوه استفاده از یک محصول، چقدر آسان است؛
معمولاً هدف‌های کاربردپذیری در قالب پرسش مطرح می‌شوند تا جنبه‌های مختلف یک محصول، مورد ارزیابی قرار بگیرد. برای نمونه، پرسش «چه مدت طول می‌کشد تا کاربر، نحوه استفاده از قابلیت‌های اولیه این مرورگر وب را یاد بگیرد؟» هدف «آموزش‌پذیری» را مورد ارزیابی قرار می‌دهد.

 

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

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

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

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

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

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

منبع :
ویکی پدیا
برنامه نویس


پستهای مرتبط

یک دیدگاه

ارسال یک پاسخ

آدرس ایمیل شما منتشر نمی شود.

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>