ویکی پدیا UI را اینگونه تعریف کرده است: سیستمی که کاربران از طریق آن با ماشین (رایانه) ارتباط و تعامل دارند. رابط کاربری می تواند شامل اجزای سخت افزاری و نرم افزاری باشد. در یک کلام و به صورت خلاصه رابط کاربری فرایند ورود و خروج (Input & Output) را تسهیل می نماید.
از دید بسیاری از کاربران معمولی نرم افزار ها و وبسایت ها ایجاد رابط کاربری کار ساده ای است. بسیاری از هم کیشان من به عنوان یک برنامه نویس طراحی UI را دست کم گرفته و آنرا در اولویت آخر پروژه قرار می دهند. اما قدرت، تاثیر گذاری و اهمیت رابط کاربری چیزی فراتر از تصور آنان است.
برای ایجاد یک رابط کاربری کاربر پسند مهارتهای بسیاری لازم است. تسلط کامل بر HTML و CSS، مهارت در استفاده از Javascript و کتابخانه های آن مثل JQuery و مهارت های جانبی مانند رنگ شناسی و مخاطب شناسی از مواردی است که یک طراح وب خوب باید داشته باشد. در کنار این موارد داشتن خلاقیت و تجربه کاری می تواند از شما یک طراح وب کامل بسازد. البته یادم نرفته است که تسلط بر فتوشاپ و فلش و سایر نرم افزارهای گرافیکی نیز از الزامات "طراح رابط کاربری" بودن است.
با هم نگاهی می اندازیم به باید ها و نباید هایی که در طراحی رابط کاربری باید در نظر داشت.
یک طراح خوب ابتدا طرحش را روی کاغذ می آورد، البته قلم . کاغذ طراح با یک دانش آموز دوره راهنمایی قطعا متفاوت خواهد بود.
به طور خلاصه ابزارهای اولیه طراحی UI عبارتند از:
· اتود 0.5 و 0.7
· روانویس استدلر Triplus Fineliner
· ماژیک طراحی فابر-کاستل سایز B
· مازیک 1-2 میلیمتری استدلر
· دفتر شطرنجی 5 میلی متری
· اسکچ برد
Sketchboard یا تخته ی طرح ریزی به تخته ای گفته میشه که مجموعه از طرح های اولیه و طرح های مرحله به مرحله بر روی اون قرار میگیره , طرح های اولیه ای که با دست طراحی شده , نسخه های چاپ شده و ... که یادداشت های یا نظرات در مورد آنها هم بوسیله یادداشت های چسبان ( sticky notes ) قرار میگیره میتواند به پیشبرد یک پروژه گروهی کمک شایانی کند.
میدونید خیلی از برنامه نویس ها عادت دارند با دید خودشان به نرم افزاری که قرار است ساخته شود نگاه میکنند. این نگاه هم می تواند مثبت باشد و سازنده و هم می تواند منفی باشد و مخرب. مثبت از این لحاظ که برنامه نویس سعی می کند خود را کاربر نرم افزار قرار داده و آن را با کیفیت خوب و مطابق استانداردها بسازد و منفی و مخرب از این جهت که فکر می کنند تمام کاربران نرم افزار به اندازه خودشان از مسائل نرم افزاری سر در می آورند. به طور معمول برنامه نویسان ابتدا کدنویسی های پایه یک نرم افزار را انجام می دهند و در آخر به طراحی رابط کاربری می رسند. این موضوع در بسیاری از موارد راه حل خوبی است و باید هم همینطور باشد. اما برخی مواقع اگر ما ابتدا رابط کاربری را طراحی کنیم و برای آن کدنویسی کنیم نتیجه بهتر و سریع تری می گیریم. وقتی رابط کاربری را داشته باشیم بهتر می توانیم در مورد چگونگی ارتباط میان اجزای برنامه تصمیم بگیریم.
معمولاً ما برنامه نویسان یاد گرفته ایم که هر پروژه ای را با نوشتن کدهای پایه شروع کنیم. در واحد های دانشگاهی هم کد نوشتن را به ما یاد می دهند، اما طراحی یک رابط کاربری استاندارد و مناسب را به ما یاد نمی دهند. شاید برای خیلی از برنامه نویس ها طراحی یک رابط کاربری مناسب از کد نویسی هم سخت تر باشد. ایده “ابتدا رابط کاربری را بسازید” می تواند به عنوان یک متد توسعه در پروژه های کوچک مورد استفاده قرار گیرد. این روش در برخی مواقع به صورت چشمگیری زمان و هزینه شما را کاهش و کارایی شما را افزایش می دهد.
رابط کاربری که طراحی می کنید، به صورت مستقیم با محیط توسعه و بستر اجرای نرم افزار شما مرتبط است. مثلاً اگر با ویژوال استادیو و برای وب برنامه می نویسید، ابزارها و شرایط متفاوتی با کسی که در حال طراحی یک برنامه ویندوزی با RAD Studio است، دارید. در ابتدا می توانید رابط کاربری را روی یک کاغذ پیاده سازی کنید و به صورت تدریجی آن را تکمیل کنید. می توانید رابط کاربری را همزمان با کدنویسی به صورت موازی توسعه دهید. تست برنامه هم در این حالت در دسترس تر و راحت تر خواهد بود. یادتان باشد که از نظر کاربر، نرم افزار یعنی رابط کاربری. کاربر برنامه شما را با شکل و شمایل آن می شناسد. کاربرچیزی از پشت صحنه نرم افزار شما نمی داند.
برخی مواقع باید دست از سخت گیری های بیجا برداشت. باید قوانین استاندارد برنامه نویسی را برای راحتی کاربر کنار گذاشت. باید از دید یک کاربر معمولی با حداقل دانش به نرم افزار نگاه کرد تا موفق شد. باید نکات روانشناسی کاربران را در محصولمان لحاظ کنیم. باید آسون گرفت تا نرم افزاری آسون به دست مشتری داد.
در هر حال اگر به صورت انفرادی برنامه می نویسید و پروژه های کوچکی دارید، بهتر است برای یکبار هم که شده ابتدا از رابط کاربری شروع کنید و این روش را به کار ببرید.
چگونه یک رابط کاربری مناسب و استاندارد طراحی کنیم؟
اگر شما قوی ترین نرم افزار را در یک زمینه خاص تولید کنید اما یک رابط کاربری مناسب برای آن طراحی نکنید، کاربران از آن استفاده نخواهند کرد. طراحی رابط کاربر مناسب، مسیر ارتباطی موثری بین کاربران و نرم افزار کامپیوتری ایجاد می کند. اگر استفاده از نرم افزار مشکل باشد، اگر باعث بروز اشتباهات متعدد شود، یا اگر نرم افزار کاربر را به راحتی به هدفش نرساند، علیرغم قدرت عملکردی که ارائه می کند، کاربران علاقه ای به استفاده از آن نخواهند داشت. طراحی رابط کاربری مناسب یکی از مهمترین مسایل تولید نرم افزار است، چون کاربر فقط رابط کاربری که با آن سر و کار دارد را درک می کند و آن را به عنوان نرم افزار می شناسد.
برای داشتن یک طراحی خوب در زمینه رابط کاربری، ابتدا باید کاربران نرم افزار را شناسایی کنید، سن، سطح سواد، نیازها و کارهایی که می خواهند با نرم افزار انجام بدهند را در نظر بگیرید. به طور مثال وقتی می خواهید نرم افزاری برای گروه سنی کودکان تولید کنید باید طراحی را با توجه با سن کاربران انجام دهید. پس از مشخص کردن کاربران و مشخصات آنان، سناریوهای هر کاربر را که در بخش تحلیل ایجاد شده اند را مورد بررسی قرار دهید و Use caseهای هر کاربر را در نظر بگیرید تا مجموعه ای از اشیاء و اعمال مربوط به آن ها مشخص شوند. این اجزاء معمولاً مبنایی برای ایجاد صفحات (منظور از صفحه، هر جزئی از رابط کاربری است که یکسری اجزای مربوط به هم را در کنار هم قرار می دهد، نه فقط صفحات وب) رابط کاربری می شوند که شامل طراحی گرافیکی، آیکون ها، متن ها، توضیحات صفحه و منوها می باشد.
خیلی از مدیر پروژه های شرکت های نرم افزاری در ایران، طراحی رابط کاربری را امری پیش پا افتاده می دانند و ایجاد آن را هم به دست برنامه نویسان می سپارند. همین که رابط کاربری، ظاهری جذاب و زیبا داشته باشد برای آنان کافی است. این ها هر چه می توانند از تصاویر گرافیکی و کامپوننت های UI برای ایجاد ظاهر زیبا در نرم افزارهایشان استفاده می کنند تا در نظر کاربر نرم افزارشان حرفه ای به نظر آید. درست است که زیبایی یکی از فاکتورهای مهم یک رابط کاربری خوب است اما همه چیز نیست. در اینجا به برخی از اصول طراحی رابط کاربری خوب اشاره می کنیم :
حتماً
عوامل موثر دیگری هم در ایجاد رابط کاربری مناسب و استاندارد وجود دارند
که در این مطلب به آن ها اشاره نشد. موضوع مهمی که حتماً باید در نظر
بگیرید، پلت فرمی است که قرار است نرم افزار شما روی آن کار کند. به طور
مثال اگر نرم افزار شما تحت وب است طراحی شما شرایط متفاوتی با یک نرم
افزار تحت دسکتاپ دارد. هر چند که مسایل بالا هم در نرم افزارهای تحت وب
قابل پیاده سازی است و هم در نرم افزارهای تحت دسکتاپ. همچنین طراحی رابط
کاربری در سیستم عامل های مختلف نیز تفاوت های زیادی با هم دارند. در این
مطلب ما به صورت Abstract و جدا از پلت فرم به مسئله طراحی رابط کاربری نگاه کردیم.
مثال هایی از رابط کاربری استاندارد در نرم افزارهای امروز را می توان Gmail در وب، Office 2007 در ویندوز و فایرفاکس در لینوکس عنوان کرد
نکاتی درباره طراحی رابط کاربری گرافیکی (GUI)
اهمیت رنگ ها در طراحی سایت
ما از وبسایت برای ارتباط با بیننده استفاده می کنیم و بحث مهم این است که بتوانیم این ارتباط را حفظ کنیم.به طور کلی 2 چیز در این امر موثر هستند:1)طراحی و رنگ بندی(که شاید هر دو را با هم بشود رابط کاربری(UserInterface) نامید 2)استفاده ای که بیننده می تواند یا می خواهد از سایت ما بکند(که این بسته به هر سایت متفاوت است.شاید در سایتی صرفا خواندن مطلب و مقاله باشد و در دیگری استفاده از سرویس های مختلف مثل ایمیل یا ... ).در واقع این دو مکمل هم هستند و اگر یکی ناقص باشد یا توجهی به آن نشود به روند پیشرفت سایت لطمه وارد می شود.یک وبسایت را فرض کنید که دارای مطالب پربار علمی باشد که افراد زیادی دنبال آن هستند ولی رابط کاربری نا مناسب و نا همگونی دارد.بینندگان شما به اندازه ای که باید باشند،نخواهد بود.شاید شما بگویید که مجبوراند استفاده کنند ولی در این صورت به محض یافتن جایگزین شما را ترک خواهند کرد.درست برعکس این قضیه هم صادق است و اگر سایت شما رابط کابری(UI) خوب و عالی داشته باشد ولی احتیاجات بیننده را نتواند برآورده کند،باز هم محکوم به شکست خواهید بود.باید به این نکته هم توجه داشته باشیم که یک رابط کاربری خوب و مناسب لزوما فقط به معنی زیبا نیست بلکه باید سعی کنیم براساس موضوع ،اهداف و نیازهای سایت آن را طراحی کنیم.
"آیا شما بهترین رنگ را برای وب سایت خود بکار گرفته اید ؟ هنگام انتخاب رنگ در زمان طراحی باید به نکات زیر توجه کنید :
لیست زیر مشخصه هایی از رنگ ها را که هنگام طراحی باید مدنظر داشته باشید بیان می کند:
1. رنگ ها اثر زیادی روی احساسات ما در 90 ثانیه اول دیدن میگذارند .
2. اثر رنگ میتواند بیننده را ترغیب به خرید یک جنس از شما کند.
3. رنگ ها رفتار ما را در برابر یک موضوع فقط تشدید نمیکنند ، بلکه اثر خود را کاملا در رفتار ما نشان میدهند
4. اثر گذاری رنگ در فرهنگ های مختلف گوناگون است !
5. هر رنگ به تنهایی یک پیام مخصوص به چشم بیننده میفرستد .
به عنوان مثال در فرهنگ آمریکای شمالی رنگ های زیر به احساسات یا مشخصه های زیر مربوط اند:
قرمز: :توانایی
، هیجان ، احساسات شدید ، سرعت ، خطر و تهاجم . این رنگ از بیننده توجه به
خود را طلب میکند . در تجارت بمعنی وام و بدهی است . این رنگ شدید ترین
رنگ احساس است و ضربان قلب و تنفس را تسریع میکند .
آبی : امنیت
، اعتماد ، مسئولیت پذیری ، سرما ، ایمان ، وفاداری ، وابستگی وجاه و جلال
. آبی دومین رنگ عوام پسند است . در تجارت بمعنای ضمانت مالی است .
سبز :تندرستی
، فراوانی ، حاصلخیزی ، آزادی ، شفا و بهبودی ، طبیعت ، پیشرفت ، حسادت و
خونسردی . در تجارت بیانگر مقام و ثروت است. این رنگ در چشم ها راحت تر از
همه دیده میشود .
قهوه ای:تاثیر گذاری ، متانت ، توانگری مالی و کمک کننده بودن . قهوه ای رنگ کره خاکی ماست و در طبیعت بسیار فراوان است .
خاکستری :صمیمیت زیاد ، اعتبار و نفوذ و عملی بودن . در تجارت بمعنای سنت گرایی است .
صورتی: ملایمت ، شیرینی ، ظرافت و زنانگی ، خوب بودن ، بی گناهی و پرورش کودک .
بنفش: وقار
، معنویت ، شاهانه بودن ، عیش و نعمت ، دارایی ، اعتبار و نفوذ ، سوگواری و
مهارت . در تجارت بزرگ نشان دادن است . بنفش طرفداری از سبک های هنرمندانه
است.
نارنجی: سرزندگی و شوخی ، لذت و خوشگذرانی ، تعادل گرمایی ، تشویق کردن ، چالاکی و نیرو ، تحمل و بلند همتی .
زرد :نور
خورشید ، گرمی ، خوشی ، نامردی ، ترسویی و حسادت . در تجارت درخواست از
نوع روشنفکرانه است و برای تاکید نیز خوب است . زرد باعث افزایش تمرکز شده ،
سوخت و ساز را زیاد میکند و سخت ترین رنگ برای چشم هاست .
طلایی: نشانگر گران بودن و پرستیژ است .
نقره ای: سرما ، علمی بودن و اعتبار و پرستیژ است .
پس وقتی میخواهید رنگی انتخاب کنید باید درباره بازار نهایی کار خود باندیشید . چه
احساساتی را میخواهید برانگیخته کنید ؟ اول کمی درباره چشم انداز احساسی
هدفتان فکر کنید و نیز پیامی که از راه دید میخواهید منتقل کنید . بعد رنگ خود را انتخاب کنید !
11 نکته در طراحی المانهای صفحات وب
با گسترش استفاده از تکنولوژی هایی نظیر Ajax و WebSocket، قسمت هایی از صفحه بدون نیاز به Refresh کل صفحه، دچار تغییرات و به روز رسانی هایی می شوند. تغییراتی که گاه نیاز است کاربر به آنها توجه کند. بنابراین باید به نحوی آنها را مشخص و برجسته کرد. البته تنها تغییر رنگ و یا ایجاد انیمیشن کافی نیست. زیرا ممکن است صفحه دارای scroll باشد و کاربر قادر به دیدن آن قسمت به روز شده نباشد. می توان با روش هایی نظیر تغییر رنگ همراه با پیمایش خودکار صفحه به قسمت به روز شده، کاربر را متوجه این تغییرات کرد (البته به نحوی که پیمایش خودکار، تمرکز کاربر را از دچار مشکل نکند).
سایت stackoverflow.com پاسخ های کاربر را با رنگ نارنجی و پیمایش صفحه روی آنها مشخص می کند.
نکته ای که در اینجا باید به آن توجه کرد علاقه کاربران به استفاده سریع از نرم افزار است. به همین منظور روش های مختلفی از جمله استفاده از کلیدهای میانبر پیشنهاد شده است. ایجاد کلیدهای میانبر در افزایش کارایی نرم افزار بسیار مؤثر است. البته بهتر است میانبرهای مهم مورد استفاده در مرورگر را به عنوان میانبرهای برنامه تعریف نکرد. زیرا باعث سردرگمی کاربر و بروز اعمال ناخواسته می شود. مثلاً در Gmail کلیدهای Ctrl + C به جای انجام عمل کپی، عمل ایجاد یک میل جدید را انجام می دهند که گاه بسیار دردسر ساز می شود (البته در صورتی که این ویژگی در تنظیمات فعال شده باشد)!
کلیدهای ترکیبی استفاده شده در Google Documents
صفحه کلید به عنوان ابتدایی ترین وسیله ارتباطی با کامپیوتر، در برنامه های تحت وب مورد بی توجهی قرار گرفته است. اما به کارگیری آن باعث افزایش کارایی نرم افزار می شود. سایت tv.clicker.com امکان استفاده از صفحه کلید را به خوبی فراهم نموده است.
پس از ثبت نام (حتی قبل از آن)، کاربران با نحوه عملکرد سایت و برنامه آشنایی لازم را ندارند. یکی از روش هایی که برای آشنایی کاربران با سایت استفاده می شود ایجاد پنجره ها و کادرهای کوچک راهنمایی است. این کادرها باید به نحوی در صفحه قرار داده شوند که برای کاربرانِ آشنا به سایت ایجاد مزاحمت نکنند. به عنوان مثال وجود این کادرها در پس زمینه سایت و خارج از چارچوب اصلی محتوا، مناسب به نظر می رسد. بهترین حالت آن است که پس از آشنایی کاربران با سایت و یا قسمت های مورد نظر، سیستم راهنما غیر فعال شود.
با پیمایش فیلدهای مختلف در صفحه پرسش سوال سایت stackoverflow.com، راهنما ظاهر می شود.
معرفی قابلیت ها و امکانات جدید برنامه، باعث آگاهی کاربر و تشویق او به سمت استفاده از آنها می شود. این تبلیغات هرچند مهم اند اما نباید در کار کاربران اخلال ایجاد کنند زیرا در این حالت تأثیر عکس خواهند داشت.
تبلیغ ویژگی های ارائه شده در wufoo.com
در صورت بروز مشکل در برنامه، نشان دادن توضیحات سیستمی و اطلاعات Debug علاوه بر در خطر قرار دادن امنیت سایت، برای ناملایم به نظر می رسند. بهتر است برای این پیام ها و مخصوصاً خطاهای 404، صفحاتی زیبا و ساده طراحی شوند که علاوه بر کم حجم بودن و توضیحات مختصر و کاربر پسند، پیشنهادهایی جهت ادامه کار به او عرضه کنند.
در صورت نمایش یک فرم به کاربر بهتر است Focus روی اولین فیلد فرم قرار گیرد. چنانچه این Focus همراه با تغییر در ظاهر فیلد باشد بسیار مفید است. باید توجه داشت که اگر کاربر در حال تایپ کلمه عبور است، هیچگاه Focus فیلد به طور خودکار تغییر نکند زیرا ممکن است او بدون توجه به تایپ رمز عبور خود ادامه دهد و تغییر Focus باعث پدیدار شدن این کلمه عبور شود!
توییتر در صفحه ثبت نام، فیلد اول را به طور خودکار انتخاب می نماید.
در هنگام تکمیل فرم، شرایطی ایجاد می شود که کاربر باید به صفحه ای دیگر رفته و دوباره به صفحه فرم بازگردد. به عنوان مثال، پس از ارسال فرم، فیلدهایی اشتباه تکمیل شده اند و کاربر دوباره به صفحه باز می گردد. در این مواقع اطلاعاتی که کاربر وارد کرده است باید حفظ شود تا نیاز به ورود مجدد آنها نباشد.
گوگل اطلاعات وارد شده را در صورت صحیح نبودن اطلاعات، نگه می دارد.
با کلید tab می توان بین فیلدهای یک فرم جا به جا شد. باید حتماً tab-order این فیلدها تنظیم شود تا علاوه بر ایجاد نظم، باعث جا افتادن برخی فیلدها از نگاه کاربر نشود.
دکمه های موجود در صفحه باید با استفاده از ویژگی های ظاهری اولویت بندی شوند. مثلاً برای دکمه ارسال، یک Button در نظر بگیرید و برای دکمه انصراف از یک لینک استفاده کنید. زیرا دکمه ها کانون توجه اند و نشان دهنده انجام یک عملیات هستند. اما لینک ها کارکردی جز انتقال صفحه ندارند و نظر را جلب نمی کنند. به این ترتیب کاربر برای کلیک بر روی دکمه بیشتر ترغیب می شود.
همانطور که می دانید ارزیابی ورودی های یک فرم به دو صورت امکان پذیر است. یکی در طرف سرور و یکی در طرف کاربر. البته وجود Ajax کمی بر پیچیدگی ها افزوده است. در مواردی مانند تحقیق درستی ایمیل یا نام کاربری چاره ای جز برقراری ارتباط با سرور نیست اما در مواردی که اجباری برای برقراری این رابطه نیست، باید از این کار اجتناب کرد. مثلاً تحقیق عددی بودن یا حرفی بودن ورودی، در طرف کاربر نیز امکان پذیر است. با این کار علاوه بر صرفه جویی در استفاده از منابع سرور، در وقت کاربر هم صرفه جویی می شود.
استفاده از OpenID در میان برنامه های تحت وب فراگیر شده است. چیزی که باعث عدم استفاده از آن می شود وجود یک فیلد OpenID URL است که برای کاربران عادی غریب به نظر می رسد. ایجاد گزینه ها و دکمه های مربوط به سرویس های معروف ارائه دهنده OpenID به سهولت استفاده از این قابلیت مهم کمک می نماید.
منابع :
http://en.wikipedia.org/wiki/User_interface
http://www.weapi.co.cc/fa/research/articles/web/17-11-web-app-elements-techniques
http://blog.userinterface.ir/2009/10/sketchboard.html
http://blog.userinterface.ir/2009/10/blog-post_08.html
http://farasun.wordpress.com/2009/05/15/how-to-design-an-standard-user-interface
http://farasun.wordpress.com/2009/02/04/ui-design-first
http://www.websaaz.com/index.php?option=com_content&view=article&id=14&Itemid=38
http://mohammadshams.blogspot.com/2009/11/graphical-user-interface-design-tips.htm