اسکچ پد Sketch Pad

لینک دانلود اسکچ پد

UX University

دانشگاه تجارب کاربری نام دانشگاهی است که بوسیله ی شرکت های Usabilia و Concept7 تاسیس گردیده است و به آموزش مباحث مربوط به تجارب کاربری میپردازد .

این دانشگاه که بر اساس مدل های آموزش مادام العمر یا LifeLong Learning است آموزش هایی را در قالب تصویر و متن و ویدئو ارائه مینماید .

آدرس وب سایت تجارب کاربری
اکانت توئیتر دانشگاه تجارب کاربری

استفاده از فضای سفید برا ی تفکیک عناصر

فضای سفید یکی از بهترین ابزارها برای تفکیک عناصر در صفحه است و کاربر بخوبی میتواند عناصر را در ذهن خود دسته بندی کند. برای مثال در یک فرم کاربر اطلاعاتی را پر میکند و گزینه های (فیلد) مشخصات شخصی با گزینه های (فیلد) اطلاعات تخصصی با چندین پیکسل از هم فاصله میگیرند و کاربر فرم را بصورت تفکیک شده میبیند.

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

استفاده از گوشه‌های خمیده

گوشه‌های خمیده و ظریف در کادرهایی که بیننده با آن سروکار دارد برای ایجاد حس خوب در کاربر موثر است و میتوان انعطاف پذیری صفحه را کمی با این روش به کاربر القا کرد.
برای دکمه‌های کلیدی در صفحه مانند ورود/ثبت نام/ خرید/سبد خرید، این گوشه‌های خمیده در بوجود آمدن این حس در کاربر موثر است.
برای نمونه باکس‌های وب سایت اپل را ببینید: http://www.apple.com

لیست کاملی از ابزارهای ارزیابی دسترسی‌پذیری در وب

کنسرسیوم جهانی وب(W3C) لیست کاملی از ابزارهای ارزیابی دسترسی‌پذیری در وب را آماده کرده است. این ابزار به طراحان کمک میکند که بخش دسترسی‌پذیری وب سایتی که در حال طراحی آن هستند را بالاببرند.

مشاهده لیست:
http://www.w3.org/WAI/ER/tools/complete

دسترسی‌پذیری در W3C:

http://www.w3.org/WAI

تجارب کاربری و رابط کاربری در delicious

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

http://delicious.com/tag/ux+ui

همچنین میتوان با قرار دادن تگهای دیگر مانند (accessibility, usability) لینکهای در این رابطه پیدا کنید. مانند:

http://delicious.com/tag/ux+ui+accessibility+usability

تجارب کاربری را در توییتر دنبال کنید

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

http://twitter.com/jvetrau/ux

http://twitter.com/mediajunkie/ux

http://twitter.com/martinpolley/uxers

http://twitter.com/g33kgurrl/ia-ui-ux

http://twitter.com/konigi/ux

طراحی سایتی برای یک محصول

اگر در نظر دارید برای یک محصول وب سایتی طراحی کنید بهتر است از یک چیدمان خلوت استفاده کنید زیرا نهایت هدف کاربر از وب سایت دیدن محصول است. برای مثال: میتوان به 4 بخش صفحه اصلی را تقسیم کرد، 1- هدر(منوهای سایت و لوگو)، 2- بخش میانی(در این بخش عکس بزرگی از محصول و توضیحاتی در مورد محصول که کاربر را به صفحه خود محصول هدایت میکند)،3- امکانات محصول و 4- پائین صفحه(فوتر).

شما با این چیدمان یک وب سایتی ساده ولی کارآمد خواهید داشت.

طراحی ساده

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

یکپارچگی بنرهای تبلیغاتی سایت

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

رنگ نوشته، پس زمینه، آیکون متناسب با لوگوی اصلی وب سایت باشد، برای کاربر شما بهتر است در هر جایی نشانه‌ای از سایت شما میبیند همه بصورت یکپارچه و در یک قالب مشخص ارائه شود.

تجارب کاربری در سیستم عامل گوگل کروم

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

تجارب کاربری در سیستم عامل گوگل کروم:
http://www.chromium.org/chromium-os/user-experience

تجارب کاربری در مرورگر گوگل کروم:
http://dev.chromium.org/user-experience

عنوان‌ها در صفحه

بسياری از کاربران بيش از آن که وقت صرف خواندن مطالب سايتی بکنند ٬ وقت صرف مرور اجمالی سایت میکنند. طراحی خوب عنوان‌ها، به اسکن سریع اطلاعات و نیز خواندن سریع اطلاعات سایت، به کاربر کمک زیادی میکند.

طراحان باید تا جایی که امکان دارد برای مطالب صفحه، عنوان در نظر بگیرند، این کار به کاربر کمک میکند تا با مرور عناوین صفحه، مطلب مورد نظر خود را راحت‌ تر پیدا کند. (راحله فرنیا)

فرم بازخورد برای امکانات جدید

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

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

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

مشاهده این پست:
http://mohammadshams.blogspot.com/2009/11/graphical-user-interface-design-tips.html

اهمیت تغییر طراحی وب سایت

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

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

نکاتی در مورد Usability

مجله اسمشینگ اقدام به انتشار چندین نکته با توضیحات کامل در مورد قابلیت استفاده (Usability) کرده است که از این نشانی میتوانید ببینید: http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines

پیاده کردن نمونه اولیه طرح وب سایت

بهترین روش برای پیاده سازی طرحی که در ذهن طراح است، کشیدن آن بر روی کاغذ(اسکچ) است. یکی از واجبات یک طراح در دست داشتن همیشه کاغذ و مداد برای کشیدن طرح هایی است که در ذهن اون شکل گرفته میشود.

مرتبط:
Sketchboard چیست ؟
Mockup Toolkit چیست ؟

روند تکمیل فرم ثبت نام

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

نمونه یک فرم ثبت نام ساده و کاربردی: http://www.viwio.com/signup

فرم ثبت نام در سایت‌های اجتماعی

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

یک نمونه فرم ثبت نام ساده و کاربردی: http://www.tripit.com

کارآمد بودن یعنی چه؟

برای کاربران کارآمد بودن سایت یعنی: استفاده آسان سایت، موثر بودن آن، و در یک کلام تطابق ساماندهی سایت با آنچه آنها انتظار دارند. (راحله فرنیا)

مرتبط:
قابلیت استفاده
معرفی سرویس آزمایش کاربردپذیری وب سایت

اهمیت محتوا

محتوا مهمترین و در برخی جنبه‌ها خطرناک ترین عنصر سایت است. برخی تحقیقات نشان میدهد که محتوا از منو اصلی، طراحی های بصری نیز از اهمیت بیشتری برخوردار است. (راحله فرنیا)

لیستی از توییت‌های رابط کاربری در توییتر

یک لیست در توییتر در زمینه رابط کاربری، در این لیست کاربران ی که در زمینه رابط کاربری فعالیت میکنند توییت میکنند.
در این لیست اکانت vl@ طراح رابط کاربری توییتر هم به چشم میخورد.

مشاهده لیست: http://twitter.com/erenemre/ui-guys

اطلاعات کافی در مورد محصول

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

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

تکیه بر عناصر اصلی وب سایت

اگر شما یک وب سایت برای تجارت و فروش محصولی داشتید در صفحه اصلی وب سایتتان و در 600 پیکسل اول بر روی دو گزینه بیشتر تمرکز کنید: آن کاری که شما انجام میدهید و آن مصولی که میخواهید به فروش برسد.

در یک کادر شیک و ساده بر روی این دو مورد بیشتر تمرکز کنید. و اطراف این دو گزینه سعی کنید متن‌های غیر مرتبط نباشد.

قابلیت استفاده

گاهی اوقات کاربران در کار کردن با قسمتهایی از سایت مشکل دارند و خیلی سریع آن را ترک میکنند. برای رفع این مشکل بهتر است قابلیت استفاده (Usability) از وب سایت را بهینه کرد. چون اگر کاربر مدت زمان بیشتری در وب سایت باقی میماند بر روی دکمه خرید یا دکمه مورد نظر شما کلیک میکرد.

حالت‌های استفاده از هدایت گرهای چند سطحی

هدایت گرهای چند سطحی زمانی استفاده میشوند که بیشتر از 3 یا 4 سطح داشته باشیم. (مانند سایت‌های تجاری)
هدایت‌گرها باید بالای محتوای اصلی و زیر منو اصلی قرار و بصورت افقی قرار بگیرد.
سطح اصلی همیشه بیرونی ترین سطح باید باشد و سطح های داخلی، درون سطح قبلی باشد.
برای جدا کردن هدایت‌گرها از کاراکتر > میتوان استفاده کرد و یا کاراکتری که معنی خروج شدن را بدهد.

هدایت‌گرهای چند سطحی

اگر شما یک وب سایتی دارید که از تعداد صفحات زیادی تشکیل شده است میبایست از هدایت‌گرهای چند سطحی استفاده کنید، این کار چندین مزیت دارد از جمله:

کاربر براحتی میتواند تشخیص دهد که در کدام بخش وب سایت است.
اگر کاربر به قسمت های قبلی میخواهد برود براحتی از طریق هدایت گرها میتواند این کار را انجام دهد.
اگر کاربر بصورت مستقیم وارد بخشی از وب سایت شده باشد، از طریق هدایت‌گرها میتواند براحتی متوجه شود که در کدام قسمت سایت قرار گرفته است.

اسکچ، کشیدن طرح اولیه برای مشتری

برای طرح اولیه که قرار است به مشتری بدهید حتما سعی کنید بر روی کاغذ آن را بکشید و مشتری را به سبک طرح اولیه (اسکچ) آشنا کنید. این کار از نظر ارزش کاری برای خودتان هم بهتر است. با اسکچ یک طراحی لذت بخش را تجربه کنید.

مرتبط:
دیدگاههای مختلف در Sketchs
پیش به سوی سایت های Sketch Based

سفارشات کارفرما برای طراحی

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

طراحی برای شرکت‌ها

در طراحی صفحه اصلی وب سایت‌ شرکت‌ها همیشه سعی کنید شعار اصلی که آن شرکت بر پایه آن بنا نهاده شده است را در 500 پیکسل اول نمایش دهید. و این نمایش شعار با ظرافت خاصی انجام گیرد که با خواندنش حس خوبی به کاربر دهد.

و انرژی و جنب و جوش در لابه‌لای منو/هدر/محتوا به چشم بخورد و کاربر فعال بودن را در وب سایت حس کند.