قالب وردپرس با سئو بالا راهکار جدید برای وب سایت های دانلودی دریافت و مشاهده

همه چیز دربارۀ تجربۀ کاربر UX

امیر چیتایی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 قانون هیک

قانون هیک یا به طور کامل قانون هیک هیمان می‌گوید:

زمان لازم برای تصمیم گیری با تعداد و پیچیدگی انتخاب‌ها، افزایش می‌یابد.

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

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

قانون فیت

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

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

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

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

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

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

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

قانون میلر

قانون میلر می‌گوید که:

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

  • ۰۷۷۰۰۹۸۴۹۶۴
  • ۰۷۷۰۰ ۹۸۴ ۹۶۴

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

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

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

به عنوان یک طراح، اغلب اوقات باید اطلاعات پیچیده‌ای را ارائه کنیم. قانون میلر به انتخاب‌های کاربران کمک می‌کند و با بخش‌بندی درست اطلاعات باعث می‌شود که کاربران به راحتی اطلاعات مورد نظر را به حافظۀ داخلی خود بسپارند.

چشم‌انداز و احساس: ارتباط طراحی بصری

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

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

ما شاهد یک حرکت به سوی مصنوعات طراحی بوده ایم که از پیکسل فاصله گرفته و  به سمت “چاشنی” یک طراحی حرکت می کنند.
این آثار شامل:
  • پانسیون‌های حالت
  • سبک آجری
  • کلاژ عنصر

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

 

 

پانسیون‌های حالت  (Mood boarding)

همانطور که از نامش پیداست، اینجا حالت‌ها شکل پیدا می‌کنند و این ویژگی به شما کمک می کند که در یک منطقه خاص قرار بگیرید و احساس کنید که حالات متناسب با هدف کلی شما ایجاد شده است. Mood boards یا همان پانسیون حالت‌ها، برای شروع بسیار مفید و کارامدند و به این وسیله شما می‌توانید بر روی چیزی که ساخته‌اید، متمرکز شوید. به عنوان یک قاعده کلی، همیشه سعی کنید در طراحی UX خود، بین ۳ تا ۵ mood boards مختلف را در کنار هم قرار می‌دهم که هر کدام از آن‌ها با هم تفاوت‌های زیادی دارند.

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

هنگام طراحی moodboards برای کتابهای کوچک، هر دو روش آنالوگ (چپ) و دیجیتال (راست) را می‌توانید انجام دهید. همچنین این را هم بدانید که moodboards می‌توند به توسعۀ نام تجاری شما کمک کند.

 

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

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

هنگام قرار دادن moodboards در کنار هم، توجه کنید که رویکردهای آنالوگ و همچنین رویکردهای دیجیتال را در نظر گرفته‌اید. اگر الهام بخش بصری شما ۱۰۰٪ دیجیتال باشد، در نتیجه مجبور می‌شوید فقط از عناصر داخل برنامۀ مربوط استفاده کنید و این ممکن است منجر به این شود که طراحی‌های شما تکراری شود. از این رو، از صفحه نمایش و از مجلات ناخوشایند قدیمی برای الهام گرفتن استفاده کنید و با این کار طرح‌های خود را برجسته کنید.

کلاژ عنصر

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

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

همانطور که سامانتا وارن، که متدولوژی سبک آجری را توسعه داده، چنین می‌گوید:

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

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

کلاژ عناصر، برای گرفتن انواع عناصر بصری مختلف و ایجاد گفتگو برای رسیدن به طراحی بالقوه بسیار مفید است. به  Reading Is Fundamental مراجعه شود.

در یکی از پست‌های لینک بالا mall تاکید می‌کند که نیاز به تعویض چشم‌اندازها با گفتگوها دارد و بر این عقیده است که این کار، مشتریان را درگیر این روند می‌کند.

کلاژ عنصر یک روش عالی برای رسیدن به یک رویکرد گفتگو است. بر اساس صحبت mall:

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

زیبایی کلاژ عناصر  این است که آنها به عنوان یک پل، moodboars و طرح شما را که به زودی توسعه می‌کند به اجزای زابط کاربری UI متصل می‌کند.

این‌ها به اندازۀ کافی منعطف هستند تا به مشتریان نشان دهند که ما برای چیزی که می‌سازیم احساس ایجاد کرده‌ایم.

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

صحبت پایانی

قبل از اینکه ما به جزئیات طراحی رابط کاربری UI و ساخت نمونه‌های تعاملی برویم، توجه به این نکته مهم است که برای رسیدن به یک طراحی نهایی و متناسب باید ابتدا یک اسکلت طراحی ایجاد کنیم.

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

 

و به طور خلاصه تا نقشه برداری شما به طور کامل انجام نشده از ریز شدن در جزئیات بپرهیزید.

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

برچسب ها : , ,

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آموزش طراحی سایت

آموزش کامل طراحی سایت

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


براتون منتشر کنم