باید ها و نباید های طراحی رابط کاربری

[Sarp]

ویکی پدیا 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های هر کاربر را در نظر بگیرید تا مجموعه ای از اشیاء و اعمال مربوط به آن ها مشخص شوند. این اجزاء معمولاً مبنایی برای ایجاد صفحات (منظور از صفحه، هر جزئی از رابط کاربری است که یکسری اجزای مربوط به هم را در کنار هم قرار می دهد، نه فقط صفحات وب) رابط کاربری می شوند که شامل طراحی گرافیکی، آیکون ها، متن ها، توضیحات صفحه و منوها می باشد

[FONT=&quot]

[/FONT]
​

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

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

[FONT=&quot]
[/FONT]

[FONT=&quot]

[/FONT]
[FONT=&quot]
[/FONT]

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


​

 

[Sarp]

نکاتی درباره طراحی رابط کاربری گرافیکی (GUI)

• از دکمه‌ها، آیکونها، کادرها و تصاویر زیبا استفاده کنید.
• هیچگاه آیکونهای موجود و دردسترس خود را بین دکمه‌های گرافیکی و Toolbar تقسیم نکنید، بلکه با توجه به محتوا و کار آن دکمه، به دنبال زیباترین و بهترین آیکون جستجو کنید.
• از امتحان کردن ترکیب رنگهای متفاوت ترسی نداشته باشید (از رنگهای لایت و ملایم استفاده کنید). ایده جذاب و مناسب به راحتی خلق نخواهد شد.
• اصوات را فراموش نکنید (یعنی نه کاملا). هرچند که تا کنون کمتر برنامه‌نویسی را دیده‌ام که به ایجاد اصوات و جلوه‌های صوتی سفارشی برایDesktop Application خود فکر کند، اما اصوات مناسب و بجا، زیبایی خاصی به برنامه خواهند داد. (البته ممکن است کاربر مذکور پس از شنیدن اصوات مورد نظر، تصور کند که EasterEgg برنامه شما را پیدا کرده است.)
• در صورت امکان (با توجه به محتوای برنامه) از پوسته (Skin) استفاده کنید. البته منظور من به هیچ وجه استفاده از پوسته‌های عجیب و غریبی که گاها در بعضی از ابزارها و tools ها دیده می‌شوند نیست. فکر نمیکنم هیچ کارمند یا کاربری (ایرانی) تمایل به استفاده از یک برنامه اداری با پوسته MacOS یا Win3.1 داشته باشد. همچنین گرد کردن (اینقدر که گاها دکمه مستطیل را به بیضی تبدیل می‌کنند) و شفافیت بیش از حد دکمه‌ها و فرمها، نتیجه‌ای معکوس خواهد داشت. استفاده از پوسته به شرطی مجاز است که کاربری برنامه را مختل نکند.
• کاربر بیچاره باید بتواند فرق بین یک Checkbox یا RadioButton انتخاب شده و انتخاب نشده را تشخیص بدهد. باید بتواند یک کنترل غیرفعال (Disable) را از روی رنگ آن تشخیص بدهد. پس لطفا از Skin های بدرنگ و عجیب پرهیز کنید.
• در صورت لزوم از فضای Titlebar هم استفاده کنید. مثلا ایجاد دکمه‌ای برای دسته بندی موضوعی اعمال مهم برنامه، یا AlwaysOnTop و غیره. البته این روش بیشتر در مورد برنامه‌هایی با مخاطب خاص توصیه میشود. مثلا در یک برنامه مدیریتی، مهندسی، صنعتی سطح بالا و ... که تعداد کنترلهای موجود و ضروری در یک صفحه خیلی زیاد باشد، وجود یک دکمه میانبر در Titlebar میتواند راهگشا باشد. (البته شکل و رنگ آن، تضادی با نمای Titebar نداشته باشد)
• خود را به استفاده از کادرهای محاوره‌ای استاندارد محدود نکنید. اگر برنامه شما نیاز به یک کادر Open، Save، Save As یا Print با امکانات خاص دارد، خودتان آن را طراحی کنید.
• به عادتهای کاربران در روش تعامل با برنامه‌ها احترام بگذارید. درست است که نوآوری و خلاقیت، لازمه موفقیت هستند، اما اجبار کاربران به دست کشیدن از عادات خود در روش کار با برنامه‌ها، گاها نتیجه مطلوبی نخواهد داشت. به عنوان مثال ممکن است در پرو‌ژه‌ای بهینه‌ترین حالت طراحی یک فرم، انتقال Tab Control به سمت راست (عمودی) یا پایین و یا AddresBar در کنار StatusBar باشد، اما آیا بهینگی ترکیب‌بندی فرم، ارزش نارضایتی کاربر از UI را دارد.
• با توجه به پیچیدگی برنامه و سطح مخاطب، در مورد وجود Hint در کنترلها تصمیم بگیرید.
• وقت کاربر را تلف نکنید. آیا واقعا نیازی هست که نمایش Splash Screen ده ثانیه طول بکشد. شاید بهتر باشد Splash را حذف کرده و در عوض لوگوی خود را با شکلی ساده در پس زمینه برنامه قرار بدهید. (اگر ممکن نبود، به اعلام وجود در صفحه About قانع باشید)
• تا جای ممکن از فرمهای Fullscreen پرهیز کنید (خصوصا Fullscreen+AlwaysOnTop). به خاطر داشته باشید برنامه شما یک Application است نه یک OS.
• در تغییر فونتهای پیشفرض نمایش برنامه، خلاقیت به خرج ندهید. اصولا فونت Tahoma برای انواع متنهای فارسی و انگلیسی، بارها امتحان خود را با موفقیت پس داده است.
• استفاده از خاصیت Align و Anchors در کنترلها به منظور قابلیت Resize و همچنین استفاده از Panel و Splitter برای جابه‌جایی پذیری اقلام، ضروری هستند. به یاد داشته باشید که برنامه شما، با تغییر وضوح صفحه (Resolution) کارایی خود را از دست ندهد.
• در انتخاب محتوای MessageDialog ها میانه‌روی کنید. نه آنقدر متن را کوتاه کنید که مفهوم Dialog بودن زیر سوال برود و نه آنقدر طولانی و تخصصی که گویا فقط مهندسین نرم‌افزار کاربر آن برنامه هستند. (مثلا نیازی به اعلام خطا در کار با ConnectionString به کارمند اداره پست وجود ندارد)
• شیوه راهبری (Navigation) برنامه و مسیر کلیکهای کاربر را بهینه کنید. دکمه‌ها، کادرها یا گزینه‌های پرکاربرد می‌بایست در نزدیکی یکدیگر قرار بگیرند.
• حتما از میانبرهای صفحه کلید (Shortcut keys) استفاده کنید. تمام دکمه‌ها و کنترلها باید Tab پذیر و قابل Focus باشند. به یاد داشته باشید که کاربران حرفه‌ای بیشتر از صفحه کلید استفاده می‌کنند تا موشواره.
• اگر از شیوه "تک فرمی" و "محوریت برنامه بر روی یک فرم" استفاده میکنید (مثلا وجود یک فرم اصلی (Main) که جداول (Grids) و کنترلهای درون آن به شکل پویا تغییر می‌کنند) میبایست متنی را برای اعلام موقعیت فعلی کاربر در نظر بگیرید. به عبارتی، کاربری که تازه از راه رسیده، باید بتواند تشخیص دهد که Grid موجود در صفحه، اقلام کالای انبار را نمایش می‌دهد یا اجناس فروخته شده را.
• از تابع AnimateWindow در برنامه‌ای استفاده کنید که کاربران آن به شما نخندند.
• طراحی واسط را یک کار ساده و پیش پا افتاده تلقی نکنید، در صورت امکان با یک گرافیست یا طراح در مورد ترکیب بندی و رنگ‌بندی UI مشورت کنید.
• در صورت امکان بهتر است خود آن گرافیست یا طراح با توجه به نظرات شما، واسط کاربری را طراحی نماید. بالاخره هر کاری را باید به دست متخصص آن سپرد. (قرار نیست هر کدنویسی، طراح هم باشد).
• اگر فکر میکنید که یک طراح هم هستید، حتما قبل از شروع طراحی در محیط توسعه، ابتدا واسط کاربری را بر روی کاغذ ترسیم کنید. به این منظور از انوع کاغذهای Storyboard یا شطرنجی موجود میتوان استفاده نمود. همچنین بخش طراحی UI در Visio کمک زیادی به شما خواهد کرد.
• طراحی واسط کاربری بر روی کاغذ، به شکل شگفت‌آوری مشکلات و نارسایی‌های UI در تعامل با کاربر را نمایان خواهد ساخت

اهميت رنگ ها در طراحي سايت

ما از وبسايت براي ارتباط با بيننده استفاده مي كنيم و بحث مهم اين است كه بتوانيم اين ارتباط را حفظ كنيم.به طور كلي 2 چيز در اين امر موثر هستند:1)طراحي و رنگ بندي(كه شايد هر دو را با هم بشود رابط كاربري(UserInterface) ناميد 2)استفاده اي كه بيننده مي تواند يا مي خواهد از سايت ما بكند(كه اين بسته به هر سايت متفاوت است.شايد در سايتي صرفا خواندن مطلب و مقاله باشد و در ديگري استفاده از سرويس هاي مختلف مثل ايميل يا ... ).در واقع اين دو مكمل هم هستند و اگر يكي ناقص باشد يا توجهي به آن نشود به روند پيشرفت سايت لطمه وارد مي شود.يك وبسايت را فرض كنيد كه داراي مطالب پربار علمي باشد كه افراد زيادي دنبال آن هستند ولي رابط كاربري نا مناسب و نا همگوني دارد.بينندگان شما به اندازه اي كه بايد باشند،نخواهد بود.شايد شما بگوييد كه مجبوراند استفاده كنند ولي در اين صورت به محض يافتن جايگزين شما را ترك خواهند كرد.درست برعكس اين قضيه هم صادق است و اگر سايت شما رابط كابري(UI) خوب و عالي داشته باشد ولي احتياجات بيننده را نتواند برآورده كند،باز هم محكوم به شكست خواهيد بود.بايد به اين نكته هم توجه داشته باشيم كه يك رابط كاربري خوب و مناسب لزوما فقط به معني زيبا نيست بلكه بايد سعي كنيم براساس موضوع ،اهداف و نيازهاي سايت آن را طراحي كنيم.

آیا شما بهترین رنگ را برای وب سایت خود بکار گرفته اید ؟ هنگام انتخاب رنگ در زمان طراحی باید به نکات زیر توجه کنید :
لیست زیر مشخصه هایی از رنگ ها را که هنگام طراحی باید مدنظر داشته باشید بیان می کند:

1. رنگ ها اثر زیادی روی احساسات ما در 90 ثانیه اول دیدن میگذارند .
2. اثر رنگ میتواند بیننده را ترغیب به خرید یک جنس از شما کند.
3. رنگ ها رفتار ما را در برابر یک موضوع فقط تشدید نمیکنند ، بلکه اثر خود را کاملا در رفتار ما نشان میدهند
4. اثر گذاری رنگ در فرهنگ های مختلف گوناگون است !
5. هر رنگ به تنهایی یک پیام مخصوص به چشم بیننده میفرستد .

به عنوان مثال در فرهنگ آمریکای شمالی رنگ های زیر به احساسات یا مشخصه های زیر مربوط اند:

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

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

 

[Sarp]

11 نکته در طراحی المانهای صفحات وب
محسوس کردن تغییرات صفحه

با گسترش استفاده از تکنولوژی هایی نظیر Ajax و WebSocket، قسمت هایی از صفحه بدون نیاز به Refresh کل صفحه، دچار تغییرات و به روز رسانی هایی می شوند. تغییراتی که گاه نیاز است کاربر به آنها توجه کند. بنابراین باید به نحوی آنها را مشخص و برجسته کرد. البته تنها تغییر رنگ و یا ایجاد انیمیشن کافی نیست. زیرا ممکن است صفحه دارای scroll باشد و کاربر قادر به دیدن آن قسمت به روز شده نباشد. می توان با روش هایی نظیر تغییر رنگ همراه با پیمایش خودکار صفحه به قسمت به روز شده، کاربر را متوجه این تغییرات کرد (البته به نحوی که پیمایش خودکار، تمرکز کاربر را از دچار مشکل نکند).

سایت stackoverflow.com پاسخ های کاربر را با رنگ نارنجی و پیمایش صفحه روی آنها مشخص می کند
​

ایجاد کلیدهای میانبر

نکته ای که در اینجا باید به آن توجه کرد علاقه کاربران به استفاده سریع از نرم افزار است. به همین منظور روش های مختلفی از جمله استفاده از کلیدهای میانبر پیشنهاد شده است. ایجاد کلیدهای میانبر در افزایش کارایی نرم افزار بسیار مؤثر است. البته بهتر است میانبرهای مهم مورد استفاده در مرورگر را به عنوان میانبرهای برنامه تعریف نکرد. زیرا باعث سردرگمی کاربر و بروز اعمال ناخواسته می شود. مثلاً در Gmail کلیدهای Ctrl + C به جای انجام عمل کپی، عمل ایجاد یک میل جدید را انجام می دهند که گاه بسیار دردسر ساز می شود (البته در صورتی که این ویژگی در تنظیمات فعال شده باشد)!

کلیدهای ترکیبی استفاده شده در Google Documents
​

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

راهنما

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

با پیمایش فیلدهای مختلف در صفحه پرسش سوال سایت stackoverflow.com، راهنما ظاهر می شود.
​

تبلیغ قابلیت ها

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

تبلیغ ویژگی های ارائه شده در wufoo.com
​

صفحات 404

در صورت بروز مشکل در برنامه، نشان دادن توضیحات سیستمی و اطلاعات Debug علاوه بر در خطر قرار دادن امنیت سایت، برای ناملایم به نظر می رسند. بهتر است برای این پیام ها و مخصوصاً خطاهای 404، صفحاتی زیبا و ساده طراحی شوند که علاوه بر کم حجم بودن و توضیحات مختصر و کاربر پسند، پیشنهادهایی جهت ادامه کار به او عرضه کنند.

صفحه 404، mixx.com
​

فرمها

انتخاب اولین فیلد

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

توییتر در صفحه ثبت نام، فیلد اول را به طور خودکار انتخاب می نماید.
​

یادآوری مقادیر

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

گوگل اطلاعات وارد شده را در صورت صحیح نبودن اطلاعات، نگه می دارد.
​

ترتیب پیمایش فیلدها

با کلید tab می توان بین فیلدهای یک فرم جا به جا شد. باید حتماً tab-order این فیلدها تنظیم شود تا علاوه بر ایجاد نظم، باعث جا افتادن برخی فیلدها از نگاه کاربر نشود.

اولویت دکمه ها

دکمه های موجود در صفحه باید با استفاده از ویژگی های ظاهری اولویت بندی شوند. مثلاً برای دکمه ارسال، یک Button در نظر بگیرید و برای دکمه انصراف از یک لینک استفاده کنید. زیرا دکمه ها کانون توجه اند و نشان دهنده انجام یک عملیات هستند. اما لینک ها کارکردی جز انتقال صفحه ندارند و نظر را جلب نمی کنند. به این ترتیب کاربر برای کلیک بر روی دکمه بیشتر ترغیب می شود.

webdevjobs.com
​

ارزیابی ورودی ها

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

صفحه ثبت نام یاهو
​

استفاده از OpenID

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

[FONT=&quot]منابع:[/FONT]​

[LEFT][URL]http://en.wikipedia.org/wiki/User_interface[/URL][/LEFT]
 [LEFT][URL]http://www.weapi.co.cc/fa/research/articles/web/17-11-web-app-elements-techniques[/URL][/LEFT]
 [LEFT][URL]http://blog.userinterface.ir/2009/10/sketchboard.html[/URL][/LEFT]
 [LEFT][URL]http://blog.userinterface.ir/2009/10/blog-post_08.html[/URL][/LEFT]
 [LEFT][URL="http://farasun.wordpress.com/2009/05/15/how-to-design-an-standard-user-interface/"]http://farasun.wordpress.com/2009/05/15/how-to-design-an-standard-user-interface[/URL][/LEFT]
 [LEFT][URL="http://farasun.wordpress.com/2009/02/04/ui-design-first/"]http://farasun.wordpress.com/2009/02/04/ui-design-first[/URL][/LEFT]
 [LEFT][URL]http://www.websaaz.com/index.php?option=com_content&view=article&id=14&Itemid=38[/URL][/LEFT]
 [LEFT][URL="http://mohammadshams.blogspot.com/2009/11/graphical-user-interface-design-tips.html"]http://mohammadshams.blogspot.com/2009/11/graphical-user-interface-design-tips.htm[/URL][/LEFT]