سلسله مراتب بصری (Visual Hierarchy)

سلسله مراتب بصری (Visual Hierarchy)

۱-اندازه دیدپذیری را تحت تأثیر قرار می دهد.

به نظر شما درست است که بگوییم هر چه بزرگ تر بهتر؟

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


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

در هر طرحی، عناصر بزرگتر- چه متن یا تصویر- نه تنها بیشتر مورد توجه واقع می شوند بلکه قوی ترین پیام را نیز به همراه خواهند داشت.

در مثال بالا می بینید که بزرگترین کلمه، چشمگیرترین و تاثیر برانگیز ترین کلمه نیز می باشد.

خوانندگان به احتمال زیاد به کلمه “Cracking” سریع تر از دومین کلمه بزرگ یعنی”Performance” واکنش نشان می دهند. اگر کلمات به یک اندازه بودند یا کلمه دیگری مثل” act” یا “time ” حتی بزرگتر این کلمات بودند، این طراحی به این اندازه تاثیر گذار نبود.
اصل مهم دیگر مربوط به این مفهوم، مقیاس یا اندازه یک شیء نسبت به شیء دیگر است. یک شیء واحد، هر چقدر بزرگ یا کوچک، تا زمانی که با شیء دیگری مقایسه نشود، نمی توان برای آن مقیاس تعریف کرد.

این مورد به ما امکان می دهد تعادل را در یک طرح بر قرار کنیم و روی عناصر غالب متمرکز شویم. هرچه مقیاس بیشتر باشد، تأکید بیشتر می شود.

۲-پرسپکتیو عمق ایجاد می کند.

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

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

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

۳-رنگ و کنتراست توجه را به خود جلب می کند.

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

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

طرح فوق را در نظر بگیرید. به این توجه کنید که استفاده از رنگ های نئونی چگونه توجه بیشتری را به خود جلب می کند؟ این طرح رنگ به عنوان duotone شناخته شده و یک روش طراحی وب بسیار مشهور است.

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

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

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

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


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

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

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

۴-فونت به طراحی نظم می بخشد.

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

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

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

به همین دلیل است که اکثر برنامه های طراحی وب علاوه بر انتخاب دستی خصوصیات تایپ فیس، یک سلسله مراتب از پیش تعیین شده شامل فونت های عنوان، زیرنویس و عناوین ترتیبیH1-H6) ) را نیز در کنار نسخه اصلی متن ارائه می دهند.
به طرح فوق نگاه کنید. آیا هنگامی که تمام کلمات به یک اندازه هستند مرتب تر به نظر رسیده و خواندن آن آسان تر است، یا هنگامی که اصول سلسله مراتب بصری اعمال شود؟

۵-فاصله و فضای خالی باعث ایجاد تأکید و حرکت می شود.

قانون فاصله (Rule of space)

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

هنگام تنظیم عناصر یک ترکیب، طراحان می توانند از فضای اطراف هر عنصر برای جلب توجه به آن عنصر خاص -یک عنصر واحد در صفحه خالی را تصور کنید- یا برای ارسال یک پیام بصری کاملاً جداگانه مانند “پیکان” پنهان در آرم مشهور FedEx استفاده کنند.
رعایت فاصله استراتژیک حتی می تواند با کمک الگوهای اسکن صفحه، چشم بینندگان را با کمک یک دنباله هدفمند در صفحه هدایت کند.

الگوهای اسکن صفحه(Page-scanning patterns)

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


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

الگوی F

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

الگوهای Z

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

طراحان می توانند با قرار دادن عناصر در مسیر این الگوهای Z شکل حرکت “چشم”، بر عناصر خاصی در ترکیب تأکید کنند. به عنوان مثال یک عنوان اصلی، یک تصویر و یک عنوان فرعی را در نظر بگیرید.

۶-مجاورت نشان دهنده ارتباط است.

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

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

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

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

۷-فضای منفی تأکید ایجاد می کند.

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

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

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

فقط کافی است به “پیکان” موجود در مرکز لوگوی مشهور FedEx یا طرح Coca-Cola در بالا، دقت کنید.

۸-همترازی چشم ها را هدایت می کند.

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

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

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

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


در طرح های دارای الگوی F، اشیاء به طور کلی در سمت چپ ترازبندی شده اند، در حالی که الگوهای Z، مانند تبلیغات فوق، اغلب از ترکیبی از ترازبندی های چپ، وسط و راست استفاده می کنند.

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


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


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

۹-گروه های دارای تعداد اجزاء فرد باعث ایجاد تمرکز می شود.

قانون فرد ها (Rule of Odds) به طراحان اجازه می دهد تا با قرار دادن اشیاء در مرکز گروه، بر روی تصاویر خاص تأکید ایجاد کنند. با قرار دادن تعداد مساوی از اشیاء در هر طرف از شیء کانونی اصلی، و بنابراین با ایجاد یک گروه دارای تعداد اشیاء فرد، به وضوح توجه به سمت مهمترین عنصر بصری واقع در مرکز این گروه جلب می شود.

قانون فرد ها (Rule of Odds) به طراحان اجازه می دهد تا با قرار دادن اشیاء در مرکز گروه، بر روی تصاویر خاص تأکید ایجاد کنند. با قرار دادن تعداد مساوی از اشیاء در هر طرف از شیء کانونی اصلی، و بنابراین با ایجاد یک گروه دارای تعداد اشیاء فرد، به وضوح توجه به سمت مهمترین عنصر بصری واقع در مرکز این گروه جلب می شود.

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

۱۱-خطوط نشان دهنده حرکت هستند.

حرکت یکی از مؤثرترین راه ها برای جلب توجه بینندگان است، به ویژه هنگامی که در یک طراحی ثابت استفاده شود. بدیهی است که خطوط برای اشاره به عناصر مورد تأکید موثر هستند- یک فلش را در نظر بگیرید- اما برای انجام این کار لازم نیست که این خطوط حتما در صفحه ظاهر شوند.

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

۱۲-شبکه یا گریدها طرح ها را سازماندهی می کنند.

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

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

طرح های شبکه جایگزین

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

شکستن شبکه (Breaking the Grid)

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

این متن پیرامونی می تواند در همان طرح و یا در صفحات اطراف قرار داشته باشد.

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

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

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

کنتراست در UI

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

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

اغلب افراد کنتراست را محدود به تفاوت رنگ ها می دانند با اینکه ابزاری بسیار فراتر از آن است.

فضای بسته و باز

ببینید این تصویر برای ایجاد یک فضای مرتب، ساده و خالی برای بهتر نشان دادن متن بالای آن چه تاثیری دارد.

پر و خالی

اگرچه سمت چپ با حجمی از محتوا پر شده است، سمت راست خالی است. این یکی دیگر از روشهای اعمال کنتراست در UI است.

متقارن و نامتقارن

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

بزرگ و کوچک

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

عناصر پر شده و حاشیه دار

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

سریف و سنز سریف (Serif and sans-serif)

استفاده از فونت های سریف و سنزیرف در کنار هم باعث به وجود آمدن کنتراست در رابط کاربری(UI) خواهد شد.

مرتب و شلوغ

در این تصویر تایپوگرافی واضح و به خوبی در کنار عناصر نامرتب و شلوغ سمت راست سازمان یافته است.

دارای بافت و فلت

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

روش های ایجاد کنتراست در UI فراوان اند.

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

سایر روش های ایجاد کنتراست:

  • تغییر فاصله میان کلمات و حروف
  • گرد کردن گوشه المان ها
  • تغییر در شفافیت اجزا
  • افقی و عمودی بودن اجزا
  • با جزئیات و ساده

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

تکنیک های UX(تجربه کاربری)

ارزش پیشنهادی (Value Proposition)

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

استراتژی محصول

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

حسابرسی رقابتی (Competitive Audit)

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

تکنیک های ux | حسابرسی رقابتی

تحقیقات فرهنگی (Cultural Probes)

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

تحقیقات فرهنگی از مجموعه ای از ابزارها و عملکرد ها، به منظور تحریک کاربر به دقت و تامل در محیط اطراف استفاده می کند

مصاحبه با ذینفعان

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

 

مصاحبه با کاربر

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

کیک آف میتینگ (Kickoff Meeting)

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

ارزیابی هیوریستیک

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

تکنیک های UX | تحقیقات هیوریستیک

طوفان فکری (Brainstorming)

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

تحلیل وظیفه (Task Analysis)

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

نقشه راه محصول (Product Roadmap)

این نقشه، برنامه تکامل محصول با ویژگی های اولویت بندی شده است که می تواند یک صفحه گسترده (Spreadsheet)، یک نمودار یا حتی یک دسته کاغذ یادداشت باشد. با استفاده از این نقشه طراحان UX استراتژی محصول و مسیر دستیابی به آن را با تیم به اشتراک می گذارند.

گروه های تمرکز (Focus Groups)

گروه تمرکز یک بحث و گفتگوی مدیریت شده است که معمولا بین ۵ تا ۱۰ شرکت کننده دارد. شما افرادی را برای بحث در مورد مسائل و نگرانی های موجود در مورد ویژگی های یک رابط کاربری دور هم جمع می کنید. این جلسه به طور معمول حدود ۲ ساعت طول کشیده و توسط یک ناظر برای حفظ تمرکز گروه کنترل می شود.

مرتب سازی کارت ها (Card Sorting)

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

تست کاربردپذیری (Usability Testing)

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

آزمون مفهوم (Concept Testing)

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

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

آزمون A/B

A/B تست به منظور ارائه نسخه های جایگزین یک محصول به کاربران مختلف، و مقایسه نتایج به منظور تشخیص انواع بهتر انجام می شود. و یک روش عالی برای بهینه سازی قیف (Funnels) و صفحات فرود(Landing Pages) است. این تست یکی از پرکاربردترین تکنیک های UX برای بهبود تجربه مشتری است چرا که اطلاعات آن کاملا منظبق بر رفتارهای واقعی مشتری است.

آزمون چریکی (Guerrilla)

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

مطالعات میدانی

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

ردیابی حرکت چشم

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

تجزیه و تحلیل SWOT

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

تحلیل دسترسی پذیری

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

هدف نهایی در تست های دسترسی پذیری بهبود محصول برای استفاده آسان توسط کاربران هدف است.

 

معماری اطلاعات (Information Architecture)

معماری اطلاعات چیست؟

معماری اطلاعات (IA) علم سازماندهی و ساخت محتوای وبسایت ها، اپلیکیشن های وب و تلفن همراه و رسانه های اجتماعی است. معمار و طراح آمریکایی، Richard Saul Wurman ، بنیان گذار حوزه ی IA در نظر گرفته می شود. به گفته کارشناسان IA، معماری اطلاعات، تصمیم در مورد چگونگی قرار گرفتنِ بخش هایی از هر چیز است، تا قابل درک شود.

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

نقش معماری اطلاعات در طراحی

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

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

طراحی IA و UX

پس از خواندن تمام موارد بالا، بسیاری از افراد ممکن است این سوال را داشته باشند: “آیا IA همان طراحی UX(تجربه کاربری) است؟”. از لحاظ فنی، این اصطلاحات به یکدیگر مربوط بوده، اما یکی نیستند. IA طرح کلی ساختار طراحی است که می تواند به وایرفریم ها و نقشه های سایت پروژه تبدیل شود. طراحان UX از آن به عنوان مواد اولیه استفاده کرده تا بتوانند سیستم نویگیشن کاربر را طراحی کنند.

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

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

اجزای سیستم IA:

اگر می خواهید یک معماری اطلاعات قوی برای محصول ایجاد کنید، باید اجزای تشکیل دهنده آن را بشناسید. پیشگامان حوزه ی IA، Lou Rosenfeld  و Peter Morville در کتاب خود«معماری اطلاعات برای وب» چهار جزء اصلی را شناسایی کرده اند: سیستم های سازمان دهی، سیستم های لیبلینگ، سیستم های نویگیشن و سیستم های جستجو.

سیستم های سازمان دهی:

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

سلسله مراتبی: احتمالا شما با مقوله ای به نام سازمان دهی محتوا به نام سلسله مراتب بصری آشنا هستید. این مورد بر مبنای تئوری روانشناسی گشتالت است و هدف اصلی آن ارائه محتوا در حامل- چه صفحه کتاب یا پوستر، صفحه وب یا صفحه نمایش تلفن همراه- به شکلی است که کاربران میزان اهمیت هر عنصر را درک کنند. این مورد توانایی مغز برای تشخیص اشیاء بر اساس تفاوت های فیزیکی از قبیل اندازه، رنگ، کنتراست، هم ترازی و غیره را فعال می کند.

 

اصطلاحات UX(تجربه کاربری)

قانون ۳ کلیک  (۳Click Rule)

قانون ۳ کلیک می گوید اگر کاربران نتوانند با سه کلیک به صفحه مورد نظر خود برسند، وبسایت را ترک خواهند کرد. این قانون بر اصل دسترسی پذیری که از مهمترین اصول طراحی تجربه کاربری(UX) است تاکید دارد که راجع این اصل به اختصار در همین مقاله هم بحث شده است. در خصوص درست و غلط بودن این قانون فعلا بحث نمی کنیم اما در مقاله ای تخصصی به بررسی این قانون و نظر صاحبنظران در این خصوص خواهیم پرداخت.

تست ۵ ثانیه (۵Secounds Test)

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

قانون ۸۰/۲۰ (۸۰/۲۰Rule)

این قانون بر اساس اصل Pareto می باشد و برای هر وب سایت، اپلیکیشن یا محیط نرم افزاری صادق است؛ قانون ۸۰/۲۰ به این معنی است که ۲۰ درصد از قابلیت ها و ویژگی ها باعث ۸۰ درصد از نتایج هستند. این قانون در زمینه های دیگر مانند فروش و مارکتینگ نیز به صورت دیگر کاربرد دارد.

تست A/B یا (A/B Testing)

A/B تست از رایجترین تست های فرایند طراحی و بهبود تجربه کاربری(UX) است. طی این تست دو محتوای مختلف به کاربر عرضه می شود تا رفتار کاربر نسبت به آنها سنجیده شود و نهایتا نسخه مطلبوب تر و بهتر انتخاب می شود.

دسترسی پذیری (Accessibility)

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

گوش دادن فعال (Active Listening)

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

تجزیه و تحلیل (Analytics)

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

مرتب سازی کارت ها (Card Sorting)

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

تجزیه و تحلیل کلیک استریم (Clickstream Analysis)

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

تحلیل رقبا (Competitor Analysis)

تحلیل رقبا به معنی ارزیابی نقاط قوت و ضعف رقبای فعلی و بالقوه و استفاده از این اطلاعات برا بهبود تجربه کاربری(UX) است.

تحلیل محتوای مورد استفاده (Context of Use Analysis)

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

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

نرخ تبدیل (Conversion Rate)

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

بازاریابی تبدیل در تجارت الکترونیک، عمل تبدیل بازدیدکنندگان سایت به خریداران می باشد. روند بهبود نرخ تبدیل، بهینه سازی نرخ تبدیل(conversion rate optimisation) نامیده می شود.

مطالعه خاطرات/ یادداشت های روزانه (Diary Study)

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

کاربران نهایی (End Users)

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

مشارکت/تعامل کاربر (User Engagement)

انگیجمنت از مهمترین اصطلاحات UX است که نشان دهنده میزان مشارکت کاربر و درگیر شدن او با پلتفرم یا محصول است. در فرایند طراحی یا بهبود تجربه کاربری(UX)، توجه به هر چیزی که منجر به تمرکز و درگیر شدن کاربر در یک صفحه از وبسایت یا اپلیکیشن شود(مانند یک دکمه یا یک منو) بسیار مهم است. هر تغییری که باعث بیشتر درگیر شدن کاربر با محصول شود درواقع باعث بهبود User Engagement شده است.

فیلد ورودی (Entry Field)

فیلد ورودی (یا فیلد ورودی داده یا متنی) به المان هایی از سایت یا اپلیکیشن گفته می شود که کاربران می توانند در آن اطلاعاتی از قبیل متن، فایل یا … را وارد کنند.

تجزیه و تحلیل خطا (Error Analysis)

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

نرخ خطا (Error Rate)

همان تعداد خطاهای رخ داده در یک دوره زمانی مشخص می باشد.

قوم نگاری (Ethnography) / تحقیقات قوم نگاری(Ethnographic Research)

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

قانون فیت (Fitt’s Law)

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

گروه تمرکز (Focus Group)

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

Free Listing

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

اصول گِشتالت (Gestalt Principles)

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

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

قانون هیک (Hick’s Law)

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

عوامل انسانی (Human Factors)

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

مطالعات انتقالی (Intercept Studies)

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

KISS

این قانون طراحی توسط نیروی دریایی ایالات متحده در سال ۱۹۶۰ ایجاد شد و مخفف (Keep it Simple Stupid) است. این قانون بیان می کند که اکثر سیستم ها در صورت سادگی بهتر عمل می کنند. سادگی یک هدف کلیدی در طراحی است.

قابلیت یادگیری (Learnability)

قابلیت یادگیری میزان سادگی یا دشواری استفاده درست از یک سیستم یا رابط کاربری(UI) را مشخص می کند.

مقیاس لیکِرت (Likert Scale)

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

نقشه ذهنی / مدل ذهنی

هرچه مدل های ذهنی کاربران به عملکرد سایت نزدیک تر باشد، قابلیت استفاده از سایت بالا تر می رود.

Minesweeping

اقدامی برای شناسایی مکان قرار دادن لینک ها در صفحات است. Minesweeping شامل حرکت سریع مکان نما در صفحه توسط کاربر و جست و جو برای مکان تغییر این مکان نما و محل وجود لینک است.

طراحی مشارکتی (Participatory Design)

طراحی مشارکتی(در ابتدا به نام Co-operative Design شناخته می شد ، ولی در حال حاضر اغلب Co-design نامیده می شود) رویکردی در طراحی با سعی در مشارکت فعالانه تمام سهامداران (مثلا کارکنان، شرکا، مشتریان، کاربران نهایی) در فرآیند طراحی است. هدف اطمینان از هماهنگی نتایج و نیاز ها است.

تحقیقات کیفی (Qualitative Research)

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

تحقیقات کمی (Quantitative Research)

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

مطالعات کاربرد پذیری از راه دور (Remote Usability Studies)

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

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

نمونه گیری نمایان گر (Representative Sampling)

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

نظر سنجی (Survey)

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

بازار هدف (Target Market)

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

تجزیه و تحلیل وظیفه (Task Analysis)

روش مورد استفاده برای شناسایی و درک فعالیت هایی که کاربران در هنگام تعامل با یک وب سایت یا اپلیکیشن انجام می دهند.

بلند فکر کردن (Think-aloud)

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

مطالعات مفهوم واقعی (True Intent Studies)

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

  • چه کسانی از وب سایت بازدید می کنند؟
  • چرا به وب سایت می آیند؟
  • چه چیز را دوست داشته یا دوست ندارند؟
  • در رسیدن به هدف چقدر موفق شدند؟

پاسخ به این سؤالات به ما در همدلی با کاربران کمک کرده و می فهمیم که چگونه نیازهای آنها را برآورده کنیم.

کاربرد پذیری (Usability)

این اصطلاح UXی به نحوه ارتباط کاربر با رابط کاربری(UI) تا چه میزان موثر، کارآمد و رضایت بخش بوده است.

ارزیابی مقایسه ای کاربردپذیری (Usability Benchmarking)

این امر میزان کاربردپذیری فعلی سیستم را سنجیده و در نتیجه یک مقدار پایه به عنوان مرجع ایجاد می‌شود تا در آینده بتوان بر اساس آن کاربردپذیری را سنجید.

آزمایشگاه کاربرد پذیری (Usability Lab)

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

تحقیقات کاربری (User Research)

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

تفاوت های رابط کاربری ui با تجربه کاربری ux

اگه بخواهیم خیلی ساده تفاوت UI و UX رو بررسی کنیم می توانیم چند مثال خیلی ساده بزنیم. به تصاویر زیر نگاه کنید و ببینید می توانید تفاوت این دو مفهوم را متوجه شوید؟

احتمالا تا اینجای مطلب تقریبا تفاوت UI(رابط کاربری) و UX(تجربه کاربری) را متوجه شده اید.در تصویر اول دو عدد سس کچاپ خوشمزه از برند هاینز را میبینید که تفاوتشان در بسته بندی آنهاست.سس سمت چپ داخل شیشه بسته بندی شده و سس سمت راست به صورت پت بسته بندی شده است. در نگاه اول ممکن است شکل سمت چپ جذابتر به نظر بیاید چون متریال شیشه گرانتر و لوکس تر است و محصول را هم زیباتر و شکیل تر نشان میدهد اما کافی است هردوی این محصولات را بخریم و استفاده کنیم و آن زمان است که میبینیم کدام محصول برایمان جذابیت بیشتری دارد.به نحوه قرارگیری سس سمت راست دقت کنید. استفاده از کدام محصول آسان تر است؟ فکرش را بکنید که هر چقدر شیشه سس رو تکان میدهید هیچ اتفاقی نمی افتد! ضربه میزنید… بازهم اتفاقی نمی افتد و سس داخل شیشه سمج تر از این حرفاست! ولی داخل محصولی که علاوه بر طراحی رابط کاربری (در اینجا ظاهر محصول) تجربه کاربری هم مدنظر قرار گرفته است این مشکلات وجود ندارد و طبیعتا برای کاربر هم جذابتر خواهد بود هرچند ممکن است که به زیبایی محصول سمت چپ طراحی نشده باشد.

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

 

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

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

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

در خبرنامه عضو شوید

جدیدترین آموزش های دیجیتال مارکتینگ را در ایمیل خود مشاهده کنید

2443