آبجی
27th October 2009, 03:22 PM
اگر شما قوی ترین نرم افزار را در یک زمینه خاص تولید کنید اما یک رابط کاربری مناسب برای آن طراحی نکنید، کاربران از آن استفاده نخواهند کرد. طراحی رابط کاربر مناسب، مسیر ارتباطی موثری بین کاربران و نرم افزار کامپیوتری ایجاد می کند. اگر استفاده از نرم افزار مشکل باشد، اگر باعث بروز اشتباهات متعدد شود، یا اگر نرم افزار کاربر را به راحتی به هدفش نرساند، علیرغم قدرت عملکردی که ارائه می کند، کاربران علاقه ای به استفاده از آن نخواهند داشت. طراحی رابط کاربری مناسب یکی از مهمترین مسایل تولید نرم افزار است، چون کاربر فقط رابط کاربری که با آن سر و کار دارد را درک می کند و آن را به عنوان نرم افزار می شناسد.
برای داشتن یک طراحی خوب در زمینه رابط کاربری، ابتدا باید کاربران نرم افزار را شناسایی کنید، سن، سطح سواد، نیازها و کارهایی که می خواهند با نرم افزار انجام بدهند را در نظر بگیرید. به طور مثال وقتی می خواهید نرم افزاری برای گروه سنی کودکان تولید کنید باید طراحی را با توجه با سن کاربران انجام دهید. پس از مشخص کردن کاربران و مشخصات آنان، سناریوهای هر کاربر را که در بخش تحلیل ایجاد شده اند را مورد بررسی قرار دهید و Use caseهای هر کاربر را در نظر بگیرید تا مجموعه ای از اشیاء و اعمال مربوط به آن ها مشخص شوند. این اجزاء معمولاً مبنایی برای ایجاد صفحات (منظور از صفحه، هر جزئی از رابط کاربری است که یکسری اجزای مربوط به هم را در کنار هم قرار می دهد، نه فقط صفحات وب) رابط کاربری می شوند که شامل طراحی گرافیکی، آیکون ها، متن ها، توضیحات صفحه و منوها می باشد.
http://farasun.files.wordpress.com/2009/05/office2007windows.png?w=500&h=149
خیلی از مدیر پروژه های شرکت های نرم افزاری در ایران، طراحی رابط کاربری را امری پیش پا افتاده می دانند و ایجاد آن را هم به دست برنامه نویسان می سپارند. همین که رابط کاربری، ظاهری جذاب و زیبا داشته باشد برای آنان کافی است. این ها هر چه می توانند از تصاویر گرافیکی و کامپوننت های UI برای ایجاد ظاهر زیبا در نرم افزارهایشان استفاده می کنند تا در نظر کاربر نرم افزارشان حرفه ای به نظر آید. درست است که زیبایی یکی از فاکتورهای مهم یک رابط کاربری خوب است اما همه چیز نیست. در اینجا به برخی از اصول طراحی رابط کاربری خوب اشاره می کنیم :
استفاده از عنوان های با معنی برای اجزای صفحه : برای اجزای رابط کاربری خود عنوان های مناسبی انتخاب کنید تا کاربر منظورتان را با یک نگاه بفهمد. برای منو ها و دکمه ها عنوان های با معنی بگذارید که کاری که انجام می دهند را در یک یا دو کلمه توصیف کند. عنوان های بی معنی و طولانی برای کاربران ناخوشایند هستند.
استفاده از آیکون های مناسب و با معنی : هرجایی که قرار است از آیکون استفاده کنید، به جز زیبایی ظاهر آن، به اندازه آن در واحد پیکسل و با معنی بودن آن هم توجه کنید. آیکون ها باید نماد مشخصی از تابعی باشند که قرار است آن را صدا بزنند. هرجا که می توانید به جای منوها از شکلک ها استفاده کنید، چون کاربران ارتباط بهتری با شکلک ها برقرار می کنند تا منوهای تو در تو.
جزئیات تکنیکی از دید کاربر پنهان باشد : شما نباید کاربر را درگیر مسائل تکنیکی کنید، حتی اگر این مسایل از نظر شما مسایل راحت و پیش پا افتاده ای باشند. به طور مثال شما نباید کاربر را مجبور کنید که یک کلید خاص را در رجیستری ویندوز انتخاب کند!
در هر صفحه پیش فرض هایی داشته باشید : در هر صفحه باید چند عمل پیش فرض برای کاربر تعریف کنید. اگر در حال گرفتن اطلاعات از کاربر هستید، باید دکمه پیش فرضی برای کاربر قرار دهید که با کلیک روی آن تمام اطلاعات آن فرم پاک یا به اصطلاح Reset شود. یا به طور مثال دکمه های تایید یا OK در خیلی از فرم ها به عنوان پیش فرض آن فرم قرار داده می شوند تا کاربر با زدن دکمه Enter قادر به اجرای تابع مورد نظر باشد.
کاهش بار فکری کاربر : هر چه کاربر بیشتر مجبور باشد بخاطر بسپارد، ارتباط او با نرم افزار دارای خطای بیشتری خواهد بود. یک رابط کاربری مناسب به حافظه کاربر متکی نیست. هر زمانی که لازم شد، نرم افزار باید اطلاعات مورد نیاز را ذخیره کند و به هنگام نیاز آن اطلاعات را به کاربر یادآوری کند.
تعریف کلیدهای میانبر : سعی کنید کلیدهای میانبر مناسبی برای توابع پرکاربرد موجود در نرم افزار ایجاد کنید. این کلیدهای میانبر باید با اعمالی که قرار است انجام دهند به گونه ای مرتبط شوند که بخاطر سپردن آن ها توسط کاربران آسان باشد. برای مثال کلید Ctrl به علاوه حرف اول عنوان تابع مورد نظر. اگر برای کاری کلید میانبر استانداردی وجود دارد (مثل Ctrl+C برای کپی)، همان را استفاده کنید، چون عوض کردن این گونه کلیدها باعث سردرگمی کاربران می شود.
رابط کاربری را بر اساس دنیای واقعی مدل کنید : به طور مثال برای ثبت فاکتور در یک سیستم فروش، سعی کنید صفحات شبیه به فاکتورهای واقعی طراحی شوند. این کار باعث می شود که کاربر احساس راحتی با نرم افزار شما کند.
اطلاعات را به تدریج نمایش دهید : اگر قرار است اطلاعات گوناگون و حجیمی را به کاربر نمایش دهید، ابتدا آن را در بالاترین سطح مجردسازی به کاربران نمایش دهید. جزئیات بیشتر باید به علاقه کاربر و با دستور او ارائه شوند.
فراهم نمون ارتباط قابل انعطاف : چون کاربران مختلف علایق گوناگون و سطح آشنایی متفاوتی با کامپیوتر دارند وجود انتخاب نحوه ارتباط ضروری است. نرم افزار باید به کاربر امکان دهد که از ماوس، صفحه کلید، قلم دیجیتالی یا حتی دستورات صوتی برای اجرای کارهای مختلف بهره بگیرد.
کارهای طولانی باید وقفه پذیر باشند : کاربر باید بتواند اعمال در حال اجرای طولانی را متوقف کند. کاربر باید از زمان اجرای یک کار آگاهی داشته باشد تا بتواند بهتر در مورد اجرا یا عدم اجرای آن کار تصمیم بگیرد. مثال ساده این عمل را در کپی کردن فایل ها دیده اید، کاربر از زمان اجرای عمل باخبر است و هرگاه که تصمیم بگیرد می تواند آن را متوقف کند.
کارهای حساس باید برگشت پذیر باشند : ممکن است کاربر عملی را به اشتباه انجام دهد و نیاز داشته باشد آن عمل اشتباه را لغو کند. نرم افزار باید چنین امکانی را در کارهای حساس به کاربر ارائه کند. به طور مثال در ویرایشگرهای تصویر، اگر به اشتباه جایی از تصویر را خراب کنید، به راحتی با یک عمل Undo می توانید اشتباه خود را جبران کنید.
رابط کاربری باید یکنواخت باشد : علاوه بر رعایت استانداردهای معمول یک رابط کاربری، شما بایستی استانداری برای طراحی رابط خود تعریف کنید تا تمام صفحات رابط شما از یکنواختی مشخصی برخوردار باشند. رابط کاربری شما باید اطلاعات را به صورت یکنواخت نمایش دهد یا دریافت کند. این کار باعث می شود تا کاربر با صفحات جدیدی که برایش باز می شوند نا آشنا نباشد و با آن ها راحت کار کند.
http://farasun.files.wordpress.com/2009/05/gmail-web.png?w=500&h=195
حتماً عوامل موثر دیگری هم در ایجاد رابط کاربری مناسب و استاندارد وجود دارند که در این مطلب به آن ها اشاره نشد. موضوع مهمی که حتماً باید در نظر بگیرید، پلت فرمی است که قرار است نرم افزار شما روی آن کار کند. به طور مثال اگر نرم افزار شما تحت وب است طراحی شما شرایط متفاوتی با یک نرم افزار تحت دسکتاپ دارد. هر چند که مسایل بالا هم در نرم افزارهای تحت وب قابل پیاده سازی است و هم در نرم افزارهای تحت دسکتاپ. همچنین طراحی رابط کاربری در سیستم عامل های مختلف نیز تفاوت های زیادی با هم دارند. در این مطلب ما به صورت Abstract و جدا از پلت فرم به مسئله طراحی رابط کاربری نگاه کردیم.
مثال هایی از رابط کاربری استاندارد در نرم افزارهای امروز را می توان Gmail (http://gmail.com/) در وب، Office 2007 (http://office.microsoft.com/) در ویندوز و فایرفاکس (http://www.mozilla.com/firefox/) در لینوکس عنوان کرد.
برای داشتن یک طراحی خوب در زمینه رابط کاربری، ابتدا باید کاربران نرم افزار را شناسایی کنید، سن، سطح سواد، نیازها و کارهایی که می خواهند با نرم افزار انجام بدهند را در نظر بگیرید. به طور مثال وقتی می خواهید نرم افزاری برای گروه سنی کودکان تولید کنید باید طراحی را با توجه با سن کاربران انجام دهید. پس از مشخص کردن کاربران و مشخصات آنان، سناریوهای هر کاربر را که در بخش تحلیل ایجاد شده اند را مورد بررسی قرار دهید و Use caseهای هر کاربر را در نظر بگیرید تا مجموعه ای از اشیاء و اعمال مربوط به آن ها مشخص شوند. این اجزاء معمولاً مبنایی برای ایجاد صفحات (منظور از صفحه، هر جزئی از رابط کاربری است که یکسری اجزای مربوط به هم را در کنار هم قرار می دهد، نه فقط صفحات وب) رابط کاربری می شوند که شامل طراحی گرافیکی، آیکون ها، متن ها، توضیحات صفحه و منوها می باشد.
http://farasun.files.wordpress.com/2009/05/office2007windows.png?w=500&h=149
خیلی از مدیر پروژه های شرکت های نرم افزاری در ایران، طراحی رابط کاربری را امری پیش پا افتاده می دانند و ایجاد آن را هم به دست برنامه نویسان می سپارند. همین که رابط کاربری، ظاهری جذاب و زیبا داشته باشد برای آنان کافی است. این ها هر چه می توانند از تصاویر گرافیکی و کامپوننت های UI برای ایجاد ظاهر زیبا در نرم افزارهایشان استفاده می کنند تا در نظر کاربر نرم افزارشان حرفه ای به نظر آید. درست است که زیبایی یکی از فاکتورهای مهم یک رابط کاربری خوب است اما همه چیز نیست. در اینجا به برخی از اصول طراحی رابط کاربری خوب اشاره می کنیم :
استفاده از عنوان های با معنی برای اجزای صفحه : برای اجزای رابط کاربری خود عنوان های مناسبی انتخاب کنید تا کاربر منظورتان را با یک نگاه بفهمد. برای منو ها و دکمه ها عنوان های با معنی بگذارید که کاری که انجام می دهند را در یک یا دو کلمه توصیف کند. عنوان های بی معنی و طولانی برای کاربران ناخوشایند هستند.
استفاده از آیکون های مناسب و با معنی : هرجایی که قرار است از آیکون استفاده کنید، به جز زیبایی ظاهر آن، به اندازه آن در واحد پیکسل و با معنی بودن آن هم توجه کنید. آیکون ها باید نماد مشخصی از تابعی باشند که قرار است آن را صدا بزنند. هرجا که می توانید به جای منوها از شکلک ها استفاده کنید، چون کاربران ارتباط بهتری با شکلک ها برقرار می کنند تا منوهای تو در تو.
جزئیات تکنیکی از دید کاربر پنهان باشد : شما نباید کاربر را درگیر مسائل تکنیکی کنید، حتی اگر این مسایل از نظر شما مسایل راحت و پیش پا افتاده ای باشند. به طور مثال شما نباید کاربر را مجبور کنید که یک کلید خاص را در رجیستری ویندوز انتخاب کند!
در هر صفحه پیش فرض هایی داشته باشید : در هر صفحه باید چند عمل پیش فرض برای کاربر تعریف کنید. اگر در حال گرفتن اطلاعات از کاربر هستید، باید دکمه پیش فرضی برای کاربر قرار دهید که با کلیک روی آن تمام اطلاعات آن فرم پاک یا به اصطلاح Reset شود. یا به طور مثال دکمه های تایید یا OK در خیلی از فرم ها به عنوان پیش فرض آن فرم قرار داده می شوند تا کاربر با زدن دکمه Enter قادر به اجرای تابع مورد نظر باشد.
کاهش بار فکری کاربر : هر چه کاربر بیشتر مجبور باشد بخاطر بسپارد، ارتباط او با نرم افزار دارای خطای بیشتری خواهد بود. یک رابط کاربری مناسب به حافظه کاربر متکی نیست. هر زمانی که لازم شد، نرم افزار باید اطلاعات مورد نیاز را ذخیره کند و به هنگام نیاز آن اطلاعات را به کاربر یادآوری کند.
تعریف کلیدهای میانبر : سعی کنید کلیدهای میانبر مناسبی برای توابع پرکاربرد موجود در نرم افزار ایجاد کنید. این کلیدهای میانبر باید با اعمالی که قرار است انجام دهند به گونه ای مرتبط شوند که بخاطر سپردن آن ها توسط کاربران آسان باشد. برای مثال کلید Ctrl به علاوه حرف اول عنوان تابع مورد نظر. اگر برای کاری کلید میانبر استانداردی وجود دارد (مثل Ctrl+C برای کپی)، همان را استفاده کنید، چون عوض کردن این گونه کلیدها باعث سردرگمی کاربران می شود.
رابط کاربری را بر اساس دنیای واقعی مدل کنید : به طور مثال برای ثبت فاکتور در یک سیستم فروش، سعی کنید صفحات شبیه به فاکتورهای واقعی طراحی شوند. این کار باعث می شود که کاربر احساس راحتی با نرم افزار شما کند.
اطلاعات را به تدریج نمایش دهید : اگر قرار است اطلاعات گوناگون و حجیمی را به کاربر نمایش دهید، ابتدا آن را در بالاترین سطح مجردسازی به کاربران نمایش دهید. جزئیات بیشتر باید به علاقه کاربر و با دستور او ارائه شوند.
فراهم نمون ارتباط قابل انعطاف : چون کاربران مختلف علایق گوناگون و سطح آشنایی متفاوتی با کامپیوتر دارند وجود انتخاب نحوه ارتباط ضروری است. نرم افزار باید به کاربر امکان دهد که از ماوس، صفحه کلید، قلم دیجیتالی یا حتی دستورات صوتی برای اجرای کارهای مختلف بهره بگیرد.
کارهای طولانی باید وقفه پذیر باشند : کاربر باید بتواند اعمال در حال اجرای طولانی را متوقف کند. کاربر باید از زمان اجرای یک کار آگاهی داشته باشد تا بتواند بهتر در مورد اجرا یا عدم اجرای آن کار تصمیم بگیرد. مثال ساده این عمل را در کپی کردن فایل ها دیده اید، کاربر از زمان اجرای عمل باخبر است و هرگاه که تصمیم بگیرد می تواند آن را متوقف کند.
کارهای حساس باید برگشت پذیر باشند : ممکن است کاربر عملی را به اشتباه انجام دهد و نیاز داشته باشد آن عمل اشتباه را لغو کند. نرم افزار باید چنین امکانی را در کارهای حساس به کاربر ارائه کند. به طور مثال در ویرایشگرهای تصویر، اگر به اشتباه جایی از تصویر را خراب کنید، به راحتی با یک عمل Undo می توانید اشتباه خود را جبران کنید.
رابط کاربری باید یکنواخت باشد : علاوه بر رعایت استانداردهای معمول یک رابط کاربری، شما بایستی استانداری برای طراحی رابط خود تعریف کنید تا تمام صفحات رابط شما از یکنواختی مشخصی برخوردار باشند. رابط کاربری شما باید اطلاعات را به صورت یکنواخت نمایش دهد یا دریافت کند. این کار باعث می شود تا کاربر با صفحات جدیدی که برایش باز می شوند نا آشنا نباشد و با آن ها راحت کار کند.
http://farasun.files.wordpress.com/2009/05/gmail-web.png?w=500&h=195
حتماً عوامل موثر دیگری هم در ایجاد رابط کاربری مناسب و استاندارد وجود دارند که در این مطلب به آن ها اشاره نشد. موضوع مهمی که حتماً باید در نظر بگیرید، پلت فرمی است که قرار است نرم افزار شما روی آن کار کند. به طور مثال اگر نرم افزار شما تحت وب است طراحی شما شرایط متفاوتی با یک نرم افزار تحت دسکتاپ دارد. هر چند که مسایل بالا هم در نرم افزارهای تحت وب قابل پیاده سازی است و هم در نرم افزارهای تحت دسکتاپ. همچنین طراحی رابط کاربری در سیستم عامل های مختلف نیز تفاوت های زیادی با هم دارند. در این مطلب ما به صورت Abstract و جدا از پلت فرم به مسئله طراحی رابط کاربری نگاه کردیم.
مثال هایی از رابط کاربری استاندارد در نرم افزارهای امروز را می توان Gmail (http://gmail.com/) در وب، Office 2007 (http://office.microsoft.com/) در ویندوز و فایرفاکس (http://www.mozilla.com/firefox/) در لینوکس عنوان کرد.