حالا که به دنیای طراحی سایت قدم گذاشته‌اید، باید بدانید که برای انجام یک طراحی موفق قبل از هر چیزی باید نیاز کاربران و چگونگی جا به جایی آن‌ها را در سایت احتمالیتان در نطر بگیرید، امری که متاسفانه بسیاری از طراحان ایرانی از آن بی‌خبرند ویا آن را به خوبی اجرا نمی‌کنند. در واقع UX و UI بخش جدانشدنی یک طرح موفق است. من در مقاله‌ای جدا به نام راهمایی کاربردی UI به اهمیت و چگونگی کارکرد رابط کاربری صحبت کرده‌ام و در این مقاله می‌خواهم از Ux یا همان تجربۀ کاربر صحبت کنم. پس به دقت این مقاله را دنبال کنید تا بعد از آن با به کارگیری روش‌های معرفی شده در این مقاله، خود را به عنوان یک طراح موفق در دنیای اینترنت معرفی کنید.

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

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

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

ایجاد اسکلت طراحی

قبل از اینکه ما به جزئیات رابط کاربر UI، طراحی و ساخت نمونه‌های تعاملی برویم، باید اسکلت کلی طراحی خود را در طراحی ایجاد کنیم. در واقع در این مرحله، از یافته های تحقیقاتی خود، برای توسعه داستان‌های کاربر و شناسایی اهداف مختلف کاربران استفاده می‌کنیم و اهداف و نیازهای مختلف کاربران را شناسایی می‌کنیم. ما می‌توانیم با استفاده از داستان‌های کاربران، سناریو‌های مختلفی را برای دسترسی آن‌ها در طراحی سایت احتمالی در نظر بگیریم. این مسئله به ما کمک می‌کند که اهداف را به صورت واضح شناسایی کنیم و به هدف اصلی که منجر به  طراحی نهایی می‌شود، دست پیدا کنیم. زمانی که با توسعه دادن جریان اولیه طراحی، به وسیلۀ نمونه‌های اولیۀ کاغذی و نقشۀ اولیۀ سایت شما، باید به حس طراحی خود، قبل از ریز شدن در جزئیات دقت کنید. پس در هنگام تشکیل اسکلت کار توجه به این نکته مهم است که وارد جزئیات نشویم تا جریان از جریان اصولی طراحی سایت خارج نشویم. در مقالۀ تحقیق از کاربر به شما گفتم که قبل از شروع به طراحی سایت، اطلاعات دقیقی از کاربران به دست آوردید. این نکته لازم است که گاهی از محیط کار خود خارج شوید و با کاربرانتان گفتگو کنید. در حین این گفتگو شما متوجه خواهید شد که کاربران به چه چیزهایی نیاز دارند. شما باید نیاز آن‌ها را برطرف کنید. اینطور، می‌توانیم مطمئن شویم که طرح ما به اصطلاح کاربر محور است. شما بایداطلاعات لازم را از کاربران به دست آورید و از آن در روند طراحی خود استفاده کنید. حالا می‌تواند این طراحی، مربوط به یک سایت یا محصول و یا حتی باز‌تولید یک محصول قدیمی باشد. با کمک اطلاعات کاربران شما می‌توانید نیاز مشترک آن‌ها را پیدا کنید و در طراحی خود از یک الگوی خاص و معتبر بهره بگیرید. عمدتاٌ شما با نظر گرفتن این شرایط می‌توانید نیاز مشترک کاربران را شناسایی کنید ولی به هر در برخی مواقع ممکن است طراحی شما انواع مختلفی از کاربران را شامل شود و مطمئناٌ آن‌ها نیازهای مختلفی خواهند داشت. توسعه دادن بخش “داستان‌ کاربر” که نشان‌دهندۀ نیازهای کاربران است به شما کمک می‌کند که بقیۀ روند طراحی شکل بگیرد و در نهایت شما به هدف خود برسید. اما این‌جا یک سوال پیش‌ می‌آید که باید به آن پاسخ دهم و آن سوال ای‌است که دقیقاٌ داستان کاربر چیست؟

داستان‌های کاربر

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

• به عنوان یک (شخصی در نقشی معین و خاص)
• من می‌خواهم (کاری را انجام دهم یا چیزی را پیدا کنم)
• به طوری که (بتوانم به اهدافم برسم)

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

با استفاده از سناریوها، طراحی خود را تعریف کنید

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

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

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

 از دیدگاه دانش آموزان، ممکن است سناریوهای زیر را برایشان بسازیم:

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

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

نقشه‌برداری از جریان‌های طراحی

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

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

با کاغذ، می‌توانید به صورت اشتراکی کار کنید. در واقع با استفاده از کاغذ این امر مهیا می‌شود تا چندین شرکت کننده در کنار یک میز قرار بگیرند و سریعا طراحی کنند و نظرات و بینش‌ها را به صورت همه جانبه به اشتراک بگذارند.

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

قوانین تجربۀ کاربری (UX)

ux ممکن است یک رشتۀ نسبتاٌ جدید محسوب شود اما، بر پایۀ چند دهه تحقیق در حوزه تعامل کامپیوتر بشر (HCI) شکل گرفته‌است. شما باید از این نکتۀ مهم را بدانید که ما در طراحی سایت بر اساس تجربۀ کاربری، در درجۀ اول برای کاربران طراحی می‌کنیم و انسان‌ها ویژگی‌های مشترک زیادی با هم دارند و ما باید تصمیمات مربوط به طراحی احتمالیمان را بر اساس نقطه‌ نظرات آن‌ها اعمال کنیم. HCI اصول و قوانین زیادی را در مورد تجربۀ کاربری در اختیار ما قرار می‌دهد و ما بر اساس آن می‌توانیم بر اساس تجربۀ کاربری سایت یا هر محصول دیگری را طراحی کنیم.

بسیاری از اصول به شکل قوانینی در آمده که من در زیر به شرح آن‌ها خواهم پرداخت:

قانون هیک به این اصل اشاره دارد که شما با کاهش (بهینه سازی) انتخاب‌ها و دسترسی‌ها، ذهن کاربرانتان را گمراه نکنید و کمک کنید که بهترین تصمیم‌گیری را داشته‌باشند.

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

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

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

در صفحۀ اصلی، اینترکام تضمین می‌کند که دکمه‌های  call-to-action (فراخوانی برای اقدام)، بزرگ و چشمگیر هستند و این کار باعث می‌شود که دیدن و حرکت در نگاه مخاطبان سایت آسانتر به نظر برسد.

در صفحۀ دسکتاپ، کاربر با استفاده از ماوس بر روی یک صفحۀ بزرگ، مسافت زیادی را می‌پیماید. در این زمینه، بسیار مهم است که از دکمه‌های call-to-action که به طور مخفف CTA نامیده‌ شده‌اند برای دید و انعطاف‌پذیری جزئیات سایت خود، اطمینان حاصل کنید.

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

• هنگام طراحی برای موبایل، اهداف خود را در نظر بگیرید. موبایل‌ها و تبلت‌ها صفحات کوچکتری نسبت به صفحۀ دسکتاپ دارند بنابراین از گزینه‌های قابل کلیک‌ کمتر ولی در عوض با اندازۀ بزرگتر استفاده کنید.
• این امر شاید واضح به نظر برسد، اما اگر یک از یک دکمۀ بزرگ در صفحۀ اصلی خود استفاده می‌کنید قبل از هر چیزی اطمینان حاصل کنید که دکمۀ مورد نظر CTA(دکمۀ کلیدی) باشد در غیر این صورت شما کاربرانتان را به اشتباه می‌اندازید و آن‌ها را از دست خواهید داد.
• هنگام طراحی drop-down (منوهای کشویی) یا سایر اشکال ناوبری (تو در تو)، اطمینان حاصل کنید که اندازه‌های قسمت هدف سایت احتمالی شما به اندازۀ کافی بزرگ و قابل تشخیص برای کاربرانتان باشد.