https://virgool.io/ux-unicorn/feed یک تیم پر انرژی در تلاش برای تولید محتوای ناب و جدید در حوزه طراحی و توسعه‌ی تجربه و رابط کاربری. fa 2026-04-14 10:55:12 https://files.virgool.io/upload/publication/fcdqe8xqonyn/yz7khp.png https://virgool.io/ux-unicorn https://virgool.io/ux-unicorn/%D8%A7%D8%B5%D9%88%D9%84-%D8%B1%D9%88%D8%A7%D9%86%D8%B4%D9%86%D8%A7%D8%B3%DB%8C-%DA%A9%D9%87-%D9%87%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD-ui-ux-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D8%A7%D9%86%D8%AF-qyxyk7nwwly0 روانشناسی نقش بزرگی در تجربه کاربر در کار با یک برنامه دارد. با فهمیدن اینکه طراحی های ما چطور درک میشوند، می توانیم تنظیماتی را ایجاد کنیم تا اپلیکیشن هایی که می سازیم در دستیابی به اهداف کاربر موثرتر باشند. برای کمک به درک بهتر کاربر، هر طراح نیاز دارد تا با برخی از اصول روانشناسی در طراحی آشنا باشد.در این مقاله تعدادی از این اصول معرفی شده است.بیایید با اثر Von Restorff شروع کنیم:1.اثر Von Restorff اثر Von Restorff (همچنین به عنوان اثر انزوا شناخته می شود) پیش بینی می کند که در صورت وجود چندین object مشابه، به احتمال زیاد موردی که با بقیه متفاوت است به خاطر سپرده می شود!این دلیل اصلی تفاوت ظاهری همه فراخوانها (CTA) با بقیه دکمه ها در یک سایت یا برنامه است!مثال اثر Von Restorffما می خواهیم کاربران بتوانند بین یک دکمه اقدام ساده و CTA تفاوت قائل شوند، تا درک صحیحی از آنچه CTA انجام می دهد داشته باشند و در عین حال آن را در طول استفاده از برنامه یا سایت به خاطر بسپارند."وقتی چندین شی مشابه وجود داشته باشد، به احتمال زیاد موردی که با بقیه متفاوت است به خاطر سپرده می شود!"2. اثر Serial position اثر Serial Position، گرایش کاربر در به بخاطر داشتن و یاد آوری اولین و آخرین مورد از یک مجموعه است.از چپ به راست ، Twitter ، Medium ، ProductHuntبه همین دلیل است که امروزه بیشتر برنامه ها منوی همبرگری را رها می کنند و به دنبال نوار پایین یا بالا می روند، مهمترین اقدامات کاربر را در سمت راست یا چپ قرار می دهند. در تصویر بالا، می توانید چند نمونه از برنامه های محبوب iOS را مشاهده کنید. هر یک از آنها "خانه"(Home) و "نمایه" (Profile) را با توجه به تأثیر Serial Position ، به سمت چپ و راست قرار می دهند.3.بار شناختی یا Cognitive loadبار شناختی یا Cognitive Load، به مجموع تلاش ذهنی در حافظه کاری کاربر اشاره دارد. به بیان ساده، همان اندیشه ای است که شما برای انجام یک کار خاص باید انجام دهید."بار شناختی میزان فکری است که برای انجام یک کار خاص باید انجام دهید."تئوری بار شناختی را می توان به سه نوع تقسیم کرد: بار شناختی Intrinsic بار شناختی Extraneous بار شناختی Germaneدر این مقاله به انواع Intrinsic و Germane اشاره می شود، زیرا این دو بیشترین کاربرد را در طراحی UX دارند. بار شناختی Intrinsicبار شناختی ذاتی، دشواری مرتبط با یک موضوع آموزشی خاص است. این دلیل اصلی کپی کردن و کپی کردن است که نقش بسیار زیادی در یک تجربه کاربری خوب دارد.به عنوان مثال بیشتر اوقات در حالت هایی از برنامه که صفحه خالی است، ما از کاربران می خواهیم یک کار را انجام دهند. در اینجا، نسخه باید کوتاه، ساده و با کلمات مناسب باشد تا کاربر بتواند به راحتی دستورالعمل ها را دنبال کند.Stayful, Serist, Lucidchartayful از چپ به راست بار شناختی Germaneبار شناختی Germane بار شناختی است که به پردازش اطلاعات و ساخت طرحواره اختصاص می یابد. این طرح ها یک الگوی فکری را توصیف می کند که دسته بندی اطلاعات و هرگونه روابط بین آنها را سازمان می دهد.یکی از دلایلی که ما از الگوهای طراحی استفاده می کنیم این است که آنها کاری هستند که ما به طور پیش فرض برای انجام آنها برنامه ریزی شده ایم، بنابراین برای کاربران آسان تر است که در یادگیری و شناخت یک اپ جدید الگوهایی مشابه با الگوهای از پیش شناخته شده را تشخیص دهند."برای کاربران آسان تر است که چیز جدیدی یاد بگیرند، اگر بتوانند آن را با الگویی که برایشان قابل فهم است، تشخیص دهند".4.قانون Hickقانون Hick محبوب ترین اصل در کنار قوانین گشتالت است. درک و تمرین آن نیز بسیار ساده است. قانون هیک توصیف می کند که زمانی که شخص برای تصمیم گیری نیاز دارد به انتخابهایی که در اختیار او است بستگی دارد. بنابراین اگر تعداد انتخاب ها افزایش یابد، زمان تصمیم گیری به صورت لگاریتمی افزایش می یابد.یک مثال بسیار خوب از قانون Hick که در طراحی تجربه کاربر اعمال می شود، لیست ها هستند.مثال قانون Hick 5.قانون Proximityقانون مجاورت بخشی از قوانین سازمان ادراك گشتالت است و بیان می دارد كه اشیایی كه نزدیك به هم هستند، تمایل دارند با هم گروه شوند. به بیان ساده تر، مغز ما می تواند اشیای نزدیک به هم را بهتر از اشیایی که فاصله زیادی دارند، مرتبط سازد. این دسته بندی به این دلیل رخ می دهد که انسان تمایل طبیعی به سازماندهی و گروه بندی امور دارد.مثال قانون مجاورت "قانون مجاورت می گوید اشیایی که نزدیک به یکدیگر هستند ، معمولاً در یک گروه قرار می گیرند"در مثال بالا ، 72 دایره وجود دارد. ما حلقه ها را به صورت گروهی و براساس فاصله بین آنها تشخیص می دهیم. به طور کلی، ما درک می کنیم که یک گروه 36 حلقه ای در سمت چپ تصویر و 3 گروه 12 حلقه ای در سمت راست تصویر وجود دارد.به اعتقاد من این مثال روشن می کند که هنگام طراحی UI نیاز به گروه بندی موارد وجود دارد و همچنین باید در هنگام چیدن چیزهایی که کاربران به طور طبیعی فکر می کنند با یکدیگر مرتبط هستند، خیلی با احتیاط عمل کرد.امیر تقی آبادی در مورد قوانین گشتالت در مقاله زیر خیلی کامل تر توضیح داده است. https://virgool.io/@amirtaqiabadi/gestalt-principles-in-ui-ide7dxat6sik ممنونم از زمانی که برای خواندن این مقاله گذاشتید، مقاله اصلی را می‌توانید از اینجا مطالعه کنید.https://marvelapp.com/blog/psychology-principles-every-uiux-designer-needs-know/ UX Unicorn زیبا نوربخش Tue, 29 Jun 2021 16:43:42 +0430 https://virgool.io/ux-unicorn/psy-wu7crbpem6en خب بالاخره رسیدیم به دوره‌ای که خودم بیش از بقیه دوره‌ها دوستش دارم. چیزایی که توی این دوره یاد می‌گیریم، لزوماً محدود به تجارت الکترونیک نیست. چون وقتی درباره‌ی نحوه‌ی تصمیم‌گیری انسان صحبت می‌کنه، میشه توی جاهای دیگه‌ی زندگی هم به کار برد. اگه قسمت اول رو نخوندید، پیشنهاد می‌کنم برای آشنایی با این سِری مطالب حتماً سَری بهش بزنید.ترتیب این سری مطالب:۱. یادداشت‌های من از دوره‌های IxDF - قسمت اول: مقدمه۲. تعامل انسان و رایانه (HCI): یادداشت‌های من از دوره‌های IxDF - قسمت دوم۳. روان‌شناسی تجارت الکترونیک: نحوه‌ی فروش آنلاین - یادداشت‌های من از دوره‌های IxDF - قسمت سوم۴. به زودی...آمپولِ این نوشته:۱. آشنایی با این دوره: درباره‌ی نحوه‌ی تصمیم‌گیری انسان‌ها، سوگیری‌های شناختی، ساختار مغز، نوروساینس و... صحبت می‌کنه.۲. یادداشت‌های من:تصمیم‌گیری انسانبخش‌های مختلف مغزافسانه‌بافیاثر تماشاگرقدرت غریبه‌هاتئوری تعهدمشتریان در صورت انصراف از خرید، با کالایی ارزون‌تر راضی میشنامتیاز دادن برای متعهد کردن (سوگیری لنگر انداختن)کامپوننت‌های کلیدی یک وبسایتادراک قیمت و کیفیتخستگی در تصمیم‌گیریترسِ از دست دادناثر اعطا / Endowment Effectنحوه بیان و پرزنت محصولاتسایت‌های حق عضویت و چگونگی متقاعدسازی کاربران (مطالعه موردی اسپاتیفای)آشنایی با دوره‌ی روان‌شناسی تجارت الکترونیک: نحوه‌ی فروش آنلایناین دوره درباره‌ی نحوه‌ی تصمیم‌گیری انسان‌ها، سوگیری‌های شناختی، ساختار مغز، نوروساینس و... صحبت می‌کنه و به ما کمک می‌کنه با این دانسته‌ها بتونیم فروش آنلاین موفق‌تری داشته باشیم. این دوره نسبتاً مطالب زیادی داره، اما همین که ویدیویی نیست و تقریباً همه مطالبش نوشتاریه، کمک می‌کنه زودتر به اتمام برسه.یادداشت‌های منبخش اعظم تصمیم‌گیری انسان در بخش‌هایی از مغز گرفته میشه که ما هیچ راهی برای دسترسی آگاهانه بهشون نداریم. (به دلیل ماهیت منفعل این فعالیت).بزرگ‌ترین اقدام آگاهانه برای یک تصمیم، اجرای آن است، نه تصمیم‌گیری آن.۲. مغز انسان ۳ بخش داره:الف) مغز قدیمی (مغز خزنده): این بخش از مغز انسان، حالت خیلی ابتدایی داره و بخشیه که با همه جانداران یکسانه و وظیفه‌ی پردازش نیازهای اولیه‌ی انسان مثل خوردن و آشامیدن، نیاز جنسی، تأمین امنیت و... رو داره. جمله‌ی زیر کاملاً این بخش از مغز رو توضیح میده:مغز خزنده همیشه گرسنه، ترسیده، عصبانی و ح*×شریه! این بخش از مغز فقط می‌خواد بخوره و در امنیت باشه.- ست گادینب) مغز میانی: مرکز تصمیمات مربوط به احساسات و عواطف انسانیه. مثل حس شادی، ناراحتی، ناامیدی، عشق، نفرت و غیره.ج) مغز جدید: این بخش مرکز تصمیمات تحلیلی، منطقی و استدلالی انسانه. این بخش از نظر فرگشتی جدیدترین بخش مغز انسانه که به وجود اومده و خیلی نوپاست. به همین خاطر هنوز تأثیر زیادی توی تصمیمات بشر نداره.زمانی که ما می‌خوایم به صورت آنلاین چیزی رو به مشتریانمون بفروشیم، خیلی مهمه که بدونیم باید هر سه بخش مغزشون رو در نظر بگیریم. حالا بسته به نوع محصول ما می‌تونه میزانش متفاوت باشه. مثلاً کسی که داره محصولی درباره امنیت کارت بانکی ارائه میده، بیشتر با مغز قدیمی سروکار داره (امنیت). محصولات غذایی هم همینطور. کسی که محصولات کادویی و مربوط به شادی می‌فروشه، بیشتر باید درباره مغز میانی (مرکز احساسات) مطالعه کنه و کسی که کتاب‌های فلسفی می‌فروشه احتمالاً کمی بیشتر باید روی مغز جدید متمرکز شه.۳. افسانه‌بافی / Confabulationزمانی که ما نمی‌دونیم چرا یک جای کار می‌لنگه، شروع می‌کنیم به اختراع دلایل بی‌پشتوانه از ذهن خودآگاهمون. سعی می‌کنیم با دلایل من‌درآوردی و خیالی، فضاهای خالی خاطراتمون رو پر کنیم. تا حالا دقت کردید وقتی دارید خاطره‌ای رو تعریف می‌کنید، یه جاهاییش یادتون نمیاد و سعی می‌کنید از تخیلاتتون اون بخش رو پر کنید؟ ۴. اثر تماشاگر / Bystander Effectهرچقدر تعداد افراد شاهد یک سانحه بیشتر باشه، احتمال کمتری داره که به شخصی که دچار سانحه شده کمک بشه. اگه یک تماشاگر حضور داشته باشه، احتمال ۸۵٪ داره که کمک کنه. اما اگه ۵ نفر حضور داشته باشن، این احتمال برای هر کدوم به ۳۱٪ می‌رسه.حالا چطور با استفاده از این اثر میشه فروش رو بیشتر کرد؟ این که افراد رو به صورت شخصی صدا بزنید. مشتریان رو طوری خطاب نکنید که انگار تعداد زیادی رو صدا می‌زنید. اتفاقا تا جایی که می‌تونید پیام‌ها رو واسه کاربران شخصی‌سازی کنید.۵. قدرت غریبه‌هاحضور افراد غریبه در تصاویر، تبلیغات و... می‌تونه مشتریان رو ترغیب به خرید کنه. همچنین نظردهی‌ها، امتیازدهی‌ها و... می‌تونه تأثیر زیادی داشته باشه. نکته‌ی مهم اینه که هرچقدر جزئیات این غریبه‌ها زیادتر باشه (مثل عکس پروفایل، نام، مکان و...) این تأثیرگذاری بیشتره.۶. تئوری تعهدانسانها به صورت ناخودآگاه دوست دارن کاری که واسشون کردی رو جبران کنن. عموماً بیشتر هم جبران می‌کنن. از این مساله میشه توی طراحی وبسایت‌ها استفاده کرد. مثلاً یه چیز رایگان به افراد بدی و بعد طرف رغبت بیشتری پیدا می‌کنه که یه محصول گرون‌تر بخره.مثال (آزمایش دنیس ریگان): یه نوشیدنی ۱ دلاری میدی و طرف یه بلیت بخت آزمایی ۵ دلاری ازت می‌خره.۷. اگه فروشنده‌اید، احتمالاً پس از پرزنت کردن یک محصول، به هر دلیلی یه چیزی مانع فروش میشه. توی چنین شرایطی خریدار اغلب موافقت می‌کنه که چیزی ارزون‌تر بخره. پس توی فروشگاه اینترنتی میشه این کار رو کرد: اگه کاربر یک محصول رو به سبد اضافه کرد و بعد حذفش کرد، به این معناست که جای دیگه احتمالا یه ارزون‌ترش رو دیده. پس باید سایت آماده باشه که بلافاصله یه محصول مشابه ارزون‌تر بهش نشون بده. ۸. امتیاز دادن برای متعهد کردن (سوگیری لنگر انداختن)آزمایشی روی دو گروه افراد انجام شد. به گروه اول گفته شد آیا حاضرید گروهی از نوجوانان تُخس رو به مدت ۲ ساعت به باغ وحش ببرید؟ تنها ۱۸٪ رضایت دادن.به گروه دوم گفته شد آیا حاضرین واسه پروژه‌ای به مدت ۲سال هفته‌ای ۲ روز از نوجوونا نگهداری کنین؟ اکثریت گفتن خیر. بلافاصله بهشون گفتن آیا حاضرین نوجوونای تخس رو به مدت ۲ ساعت ببرین باغ وحش؟ ۵۰٪ رضایت دادن!نکته‌ی جالب این که اون دسته‌ای از گروه اول که پذیرفته بودن، بعد از اتمام کار تنها ۴۰٪ شون رضایت دادن که برای بار دوم بیان. اما گروه دوم ۸۰٪ رضایت دادن!استفاده در فروش اینترنتی: اگه مشتری میاد یه جنسی رو بخره، اول گرون‌ترین رو بهش نشون بدین و بعد ارزون‌ترها رو.۹. کامپوننت‌های کلیدی یک وبسایت:الف) بالانسب) رنگج) حرکت (موشن)د) قیمت‌گذاری: تحقیقات نشون میده که مردم به یه ساختار قیمت‌گذاری صادقانه اهمیت میدن. اونا نمی‌خوان صفحه به صفحه برن و هر صفحه مبلغی به سفارششون اضافه بشه (مثل مالیات و ارسال و...)هـ) اطلاعات: باید خیلی راحت به دست بیادو) شخصی‌سازی: مردم عاشق اینن که بر اساس چیزی که هستن بهشون ارزش داده شه.۱۰. ادراک قیمت و کیفیتجاهایی که اختلاف قیمت دو محصول مشابه خیلی کمه، مردم عموماً اون یکی که قیمت بیشتری داره رو به عنوان «با کیفیت‌تر» برداشت می‌کنن.۱۱. خستگی در تصمیم‌گیریجوناتان لیواو و شان دنزینگر تحقیقی توی دادگستری انجام دادن و به نتیجه رسیدن مهم نیست جرمت چیه یا پس‌زمینه‌ی نژادیت چیه. هرچقدر قاضی دیرتر تصمیم بگیره، احتمال تبرئه شدنت کمتره.حالا توی فروش آنلاین هم میشه گفت هرچقدر کاربر دیرتر تصمیم بگیره، احتمال خریدش کمتره.۱۲. ترسِ «از دست دادن» می‌تونه یک انگیزه برای خرید باشه.۱۳. اثر اعطا / Endowment Effect به چند نفر گفتن این ماگ مال تو. حالا بیا عوضش کن. اکثرشون حاضر نشدن با یه ماگ زیر ۲ برابر قیمت عوضش کنن. «بشر راضی نمیشه چیزایی که داره رو از دست بده».استفاده در فروش اینترنتی: وقتی کاربر رو صاحب چیزی کنی (مثل Trial)، دیگه حاضر نیست اونو از دست بده و احتمال بیشتری داره که بخره.۱۴. به جای این که بگین «این دارو ۱۰٪ احتمال مرگ داره، بگین ۹۰٪ احتمال زنده موندن داره»۱۵. سایت‌های حق عضویت و چگونگی متقاعدسازی کاربرانچطوری سایتایی که پلن درآمدیشون با حق عضویته، مردم رو متقاعد می‌کنن که ازشون خرید کنن؟بیایید ببینیم اسپاتیفای چیکار می‌کنه:کشف و شهود: کاربر وبسایت رو برای اولین بار می‌بینه. توی این مرحله مزایای سرویس و سهولت ثبت نام و شروع کار رو پروموت می‌کنن. درباره‌ی کیفیت صحبت می‌کنن و این‌که می‌تونید از اسپاتیفای روی همه‌ی دستگاهاتون استفاده کنین.درگیری سطحی: توی این مرحله باید کاربری خیلی راحت و لذتبخش باشه. کاربر سرگرم شه و ۹۹٪ از چیزی که دوست داره رو بدون نیاز به یادگیری ازش دریافت کنه.تعهد: اینجا دیگه همه چی مربوط به شخصی سازیه. اینجا جاییه که قضیه می‌تونه پیچیدگی بیشتری پیدا کنه. چون کسانی که یه سرویس رو باهاش به صورت حرفه‌ای ارتباط برقرار می‌کنن، کارای بیشتری باهاش انجام میدن و تخصص بیشتری کسب می‌کنن. UX Unicorn ایمان قاسمیان Sat, 05 Jun 2021 13:20:57 +0430 https://virgool.io/ux-unicorn/%D9%87%D8%B4%D8%AA-%D9%82%D8%A7%D9%86%D9%88%D9%86-%D8%B7%D9%84%D8%A7%DB%8C%DB%8C-%D8%B4%DB%8C%D9%86%D8%AF%D8%B1%D9%85%D9%86-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-hnugmkaznhau این قوانین از متن طراحی رابط کاربر توسط بن شیندرمن گرفته شده است . شیندرمن این مجموعه از اصول را مطرح کرده است که به لحاظ اکتشا فی حاصل تجربه و قابل اعمال در بیشتر سیستم های تعاملی بعد از پالایش، گسترش و تعبیر و تفسیر شدن هستند.برای بهبود قابلیت استفاده ی یک کاربرد مهم است که یک رابط با طراحی خوب داشته باشیم. 8 قانون طلایی شیندرمن در مورد طراحی رابط به عنوان راهنما یی برای یک طراحی تعاملی مناسب است.تلاش برای ثبات (Strive for consistency)دنباله های متناوب اعمال بهتر است که در موقعیت های مشابه یکسان باشند؛ اقدامات و الگوهای طراحی یکسان برای شرایط مشابه باید در منوها و برگه های راهنما استفاده شود و دستورات ثابت نیز باید در سراسر متن به کار برود. به خاطر داشته باشید که یک رابط کاربری منسجم به کاربرانتان اجازه می دهد اقدامات و اهداف خود را به آسان ترین شیوه ممکن انجام  دهند.الگوهای طراحی یکپارچهکاربران دائمی را به استفاده از میانبرها توانا سازید (Enable frequent users to use shortcuts)با افزایش فراوانی استفاده، میل کاربران نیز به کاهش تعداد تعاملات و افز ایش سرعت تعامل افزایش مییابد . اختصارات ، کلیدهای عمل ، دستورات مخفی و امکانات زیاد برای یک کاربر متخص خیلی مناسب هستند.نمایش shortcuts برای افزایش سرعت و عملکرد کاربربازخوردهایی با اطلاعات مفید ارائه دهید(Offer informative feedback)برای هر کار اپراتور (کاربر)، باید بازخورد وجود داشته باشد. برای فعالیت های کوچک و مکرر، پاسخ باید نسبتا کم و نامحسوس باشد، در حالی که برای فعالیتهای بزرگ و غیرتکراری، این پاسخ باید خیلی بزرگتر و مشخص باشد.شما باید در هر مرحله از فرایندی که کاربر در آن قرار دارد به او در مورد اتفاقی که در حال روی دادن است آگاهی دهید. این بازخوردها باید با معنی، مرتبط، واضح و متناسب باشند.بازخوردهای مفید ارائه دهید.مکالمه طراحی کنید(Design dialog to yield closure)توالی فعالیت ها باید به گروه هایی سازماندهی شوند که دارای شروع ادامه و پایان باشند. بازخورد آموزنده در مرحله ی پایان مجموعه ای از فعالیتها به کاربرها احساس رضایت از انجام کار، احساس آسودگی، نشانه ای برای کنار گذاشتن طرح های تصادفی و گزینه هایی از ذهن آنها را ارائه می دهند و نیز نشانه ای برای این است که راهی مشخص برای آمادگی برای گروه بعدی فعالیت ها وجود دارد. سعی کنید کاربرانتان را شگفت‌زده  نکنید.فرآیندها را طوری طراحی کنید که ابتدا وسط و پایان آن ها مشخص باشد روش هایی ساده برای کنترل خطا ارائه دهید(Offer simple error handling)تا حد ممکن، سیستم را به نحوه ی طراحی کنید که کاربر نتواند مرتکب خطا ی جدی شود. اگر خطایی پیش آمد، سیستم باید قادر باشد تا خطا را شناسایی کند و مکانیسمی ساده، قابل درک برای کنترل آن خطا ارائه دهد .پیام خطاهای ساده و واضحبرگشت ساده ی فعالیت ها را ممکن سازید(Permit easy reversal of actions)این ویژگی باعث از بین رفتن نگرانی می شود، چون کاربر می داند که خطاها امکان برگشت دارند؛ در نتیجه کشف فعالیت (های ناشناخته را امکان پذیر می کند. واحدهای برگشت پذیری ممکن است به عنوان یک فعالیت واحد ، یک مدخل داده یا گروه کاملی از فعالیت ها باشند.امکان بازگشت به مرحله قبلاز منبع داخلی کنترل حمایت کنید(Support internal locus of control)به کاربران این قدرت را بدهید که انتخاب کنند که آیا برنامه را ادامه دهند یا از آن خارج شوند. کاربران مجرب به شدت تمایل دارند این احساس را داشته باشند که مسئول سیستم هستند و سیستم به فعالیت های آنها پاسخ میدهد. سیستم را به گونه ای طراحی کنید که کاربران را به عنوان سازندگان اقدامات تشویق کنید نه پاسخ دهندگان.از بار حافظه ی کوتاه مدت بکاهید(Reduce short- term memory load)بخاطر محدودیت پردازش اطلاعات بشر در حافظه ی کوتاه مدت نیازمند است که نمایشها ساده باشند، صفات نمایش چندگانه درهم ادغام شوند، فراوانی حرکت کاهش یابد و زمان مناسب و کافی برای کدها، نمایه ها و توالی فعالیت ها در نظر گرفته شود. به طور مثال چون انسان در یک زمان تنها قادر به نگهداری 5 مورد در حافظه کوتاه مدت خود است، اپل با در نظر گرفتن این حقیقت در طراحی منو اصلی گوشی های خود تنها 4 آیکون قرار داده است.و نکته‌ی نهایی اینکه همه‌ی این موارد مجموعه ای از قوانین ساده و کارآمد هستند که به ما در تصمیم‌گیری و قضاوت کمک  می‌کنند. به آنها می‌توان به عنوان مجموعه ای از قوانین کلی به عنوان بهترین تمرینات رابط کاربری نگاه کرد.منبع: https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces UX Unicorn الهام توفیقی Thu, 07 Jan 2021 13:53:48 +0330 https://virgool.io/ux-unicorn/10-%D9%81%D8%A7%DA%A9%D8%AA%D9%88%D8%B1-%D8%A7%D8%B5%D9%84%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-t32mwtbdu1sb ژاکوب نیلسون و رولف مونیخ در سال 2017 به معرفی 10 فاکتور اصلی کاربردپذیری رابط های کاربری پرداخته اند که در این مقاله به بیان و تشریح این قوانین می پردازیم:قابلیت رویت وضعیت سیستم (Visibility of system status)کاربران همواره باید نسبت به عملیات های سیستم به آسانی مطلع باشند و همچنین موقعیت خود در سامانه بدانند تا گزارش های مربوط به وضعیت موجود در زمان منطقی را درک کنند. هماهنگی سیستم با دنیای واقعی (Match between system and the real world)طراحان باید تلاش کنند تا نوع زبان، عبارت شناسی و مفاهیمی را منعکس کنند که کاربران در دنیای واقعی پیدا می کنند)در مقابل صحبت های فنی(. ارائه ی اطلاعات در ترتیب منطقی و به دوش کشیدن انتظارات، ممکن است طی تعاملات دنیای واقعی ایجاد شود و از موانع شناختی بکاهد و استفاده از سیستم را آسانتر کند.هماهنگی های شناختی ذهن کاربر و سیستمهماهنگی های دیداری سیستم با دنیای واقعی آزادی و کنترل کاربر (User control and freedom)به عنوان پیشنهاد به کاربران یک فضای دیجیتالی بگویید که در آنجا مراحل بازگشتی نیز امکان پذیر هستند، این موارد عبارتند از تکرار یا از بین بردن اقدامات پیشین .ایجاد امکان ادامه دادن و یا بازگشت ثبات و استانداردها (Consistency and standards)طراحان رابط کاربری باید این اطمینان را ایجاد کنند که ثبات در رنگهای مورد استفاده، ثبات در قلم‌ها ، اندازه فونت‌ها، ثبات در اندازه عناصر و ثبات در فاصله اصطلاحات یا کلمات خاص در سراسر صفحه های مشابه حفظ می شوند. همچنین نباید هیچ گونه ابهام در واژه ها وجود داشته باشد. برای مثال کاربران از اعمال ، کلمات و موقعیت هایی خاص برای نمایش یک چیز مشترک استفاده می کنند. https://material.io/یک مثال خوب برای یک سیستم با ثبات در طراحی رابط های کاربری ، Apple‘s Human Interface Guidelines و Google‘s Material Design Guidelines است.توجه! لینک زیر ابزاری بسیار جذاب است که می توانید با آن ساختار دیداری محصول خود را تعریف کنید. https://frontify.com/styleguide تشخیص به جای یادآوری (Recognition rather than recall)اطلاعات مرتبط با فعالیت را زمانی که کاربران در حال انجام فعالیت ها هستند را درون صفحه نمایش حفظ کنید تا بار شناختی کاهش یابد . به دلیل محدود یت‌ها‌ی حافظه‌ی کوتاه مدت، طراحان باید به کاربران این اطمینان را بدهند که مجبور نیستند اطلاعات را در طول بخش های فعالیت به خاطر بسپارند. حفظ این اطلاعات به صورت اشکار یا ارائه‌ی ابزارهای آسان مرتبط با بازیابی این اطلاعات ضرورت دارد.ارائه‌ی آیتم ها در صفحه برای راحت‌تر کردن انتخاب کاربر پیشگیری از خطا (Error prevention)جلوگیری از خطا، در صورت امکان سیستم ها را به گونه ای طراحی کنید که تعداد خطاها ی ممکن آنها در حداقل نگه داشته شود. با این کار کاربران مجبور نمی شوند مشکلات را اصلاح کنند که ممکن است گاهی فراتر از سطح تخص آنان باشد . حذف فعالیت هایی که ممکن است به خطاها یی بیانجامد ، راه حلی برای ممانعت از خطای کاربر هستند.نمایش خطای کاربر در حین انجام آن انعطاف پذیری و کارایی استفاده (Flexibility and efficiency of use)با استفاده ی افزایشی، تقاضا برای تعاملات کم ایجاد می شود که موجب رشد سریع می شود. این مسئله را می توان به واسطه ی استفاده از اختصارات ، کلید های عمل، دستورات مخفی یا امکانات زیاد بدست آورد. کاربران باید قادر باشند تا رابط را شخصی سازی کرده یا تغییر دهند تا متناسب با نیازها یی باشد که فعالیت های مداوم آنها از طریق این ابزارهای مناسب حاصل شود .امکان وارد کردن شماره موبایل یا نام کاربری که نمایش خوبی از انعطاف پذیری سیستم است. زیبایی شناسی و طراحی ساده (Aesthetic and minimalist design)آشوب و در هم ریختگی را در فضای رابط کاربری به حداقل برسانید. همه ی منابع توجه کاربربین عملکرد اصلی و اطلاعات غیرضروری در رقابت است که موجب دشواری بازیابی اطلاعات مرتبط می شود. بنابراین،المان های صفحه نمایش باید تنها به اجزای مورد نیاز برای وظایف فعلی کاهش یابد، ضمن اینکه برای هدایت کاربر به سوی اطلاعات خاص، فعالیت ها و اعمال یا محتوای دیگراز ابزارهایی شفاف و محسوس استفاده شود .سادگی در خدمت عملکردبه کاربران کمک کنید تا خطاها را تشخیص داده و جبران کنند (Help users recognize, diagnose, and recover from errors)طراحان باید فرض کنند که کاربر نسبت به اصطلاحات فنی اطلاعاتی ندارد ، بنابراین پیام های خطا باید به زبان ساده ارائه گردد تا توجه کاربران را به مشکلات معطوف کند و راه حل ها باید به گونه ای بیان شوند که هیچ چیزی در ترجمه از زبان فنی به زبان بصری از قلم نیفتند. همچنین تا حد ممکن کاربر ر ا غافلگیر نکنید. یکی از مهم ترین اصول طراحی یک رابط کاربری خوب ، اجتناب از غافلگیر کردن کاربر است منظور از غافلگیر کردن کنش یا واکنشی از طرف نرم افزار است که برخلاف انتظار کاربر باشد. شرط موفقیت در اجتناب از غافلگیری کاربر داشتن درک درستی از انتظارات و پیش زمینه های ذهنی کاربر است.پیام خطای کامل کمک و مستندسازی (Help and documentation)اگرچه مسئله ی ایده آل برای کاربران این است که بدون رفت و آمد مکرر به سیستم بتوانند به اهداف و عملکرد مورد نظر هدایت شوند، ممکن است گاهی استفاده از مراحل بیشتر برای رسیدن به هدف نیز نیاز باشد. در چنین مواقعی ، از موقعیت و دسترسی های کاربر اطمینان حاصل نمایید و همچنین اطمینان یابید که فعالیت و عملکرد در نظر گرفته شده در تخصص کاربر مورد نظر می باشدو­­ آنها را به سو ی مراحل ضرور ی هدایت میکند.نمایش همه ی مراحل یک فعالیت که به عملکرد بهتر کاربر کمک می‌کند.و نکته‌ی نهایی اینکه همه‌ی این موارد مجموعه ای از قوانین ساده و کارآمد هستند که به ما در تصمیم‌گیری و قضاوت کمک  می‌کنند. به آنها می‌توان به عنوان مجموعه ای از قوانین کلی به عنوان بهترین تمرینات رابط کاربری نگاه کرد.منبع: https://medium.muz.li/10-tips-on-how-to-conduct-a-perfect-heuristic-evaluation-ae5f8f4b3257 UX Unicorn الهام توفیقی Thu, 07 Jan 2021 13:40:30 +0330 https://virgool.io/ux-unicorn/%D9%81-%D8%A7%D8%B2-%D8%A7%D9%84%D9%81%D8%A8%D8%A7%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-t8h2vqdgm7hq واقعیت این است که اکثر مردم پر کردن فرم ها را دوست ندارند.اما چرا؟فرم پر کردن شبیه به امتحان دادن است! باعث می شود کاربران احساس اضطراب داشته باشند. اگر کاربران پس از صرف وقت برای پر کردن یک فرم بازخورد مثبتی دریافت نکنند در برابر آن احساس دلسردی و اتلاف وقت می کنند.فرم ها به کاربران کمک می کنند تا برای رسیدن به هدف نهایی خود، اطلاعاتشان را به سایت ها یا اپلیکیشن ها ارسال کنند. مثلا خرید یک محصول، یا دانلود یک فایل.کاربر باید بتواند فرم های شما را سریع و راحت تکمیل کند. با این حال اگر اصول طراحی فرم را رعایت نکرده باشید، ممکن است فرم های شما گیج کننده، آشفته و پر کردن آنها برای کاربران سخت باشد. و همانطور که می دانید سایت های با هزینه تعامل بالا، نرخ تبدیل پایینی دارند.صرف کمی وقت برای بررسی طراحی فرم، می تواند برای کاربردپذیری، تجربه کاربری و نرخ تبدیل سایت شما شگفت انگیز باشد. در اینجا 16 نکته ی مهم برای طراحان UI / UX آورده شده است که می خواهند طراحی فرم وب و تلفن همراه خود را فوق العاده کنند.1. کاربرهایتان را بشناسیدبه این فکر کنید که چه کسی می خواهد به فرم پاسخ دهد و با این کار چه چیزی را می خواهد بدست آورد.اگر پاداش یا تجربه مثبتی در نتیجه ی این کار وجود داشته باشد ، احتمال انجامش توسط کاربران بسیار بیشتر است.هرگونه توانایی و تفاوت جسمانی را که ممکن است کاربران تجربه کنند در نظر بگیرید:مشکلات بینایی موثر بر توانایی خواندن.محدودیت های کنترلی موثر بر توانایی استفاده از ماوس، صفحه کلید و صفحه لمسی.مسائل شناختی که بر توانایی فرد در درک فرم تأثیر می گذارد.2. طرح خود را اصلاح کنید- فرم ها باید ساده باشند. از عناوین واضح استفاده کنید تا مستقیما به همان چیزی که از کاربر خواسته شده اشاره کند.- استفاده از فضای سفید حس سادگی را تقویت می کند.- استفاده از یک ستون محتوا در اولویت است. ستون های بیشتر احتمال وقفه و حواس پرتی در روند کار را افزایش می دهد.اگر از بیش از یک ستون استفاده کنید، محتوا باید کاملاً مرتبط باشد.پترن تک ستونه در مقابل دو ستونه- اگر مسیر طولانی ای باید طی شود، پیشرفت را در طول کار نشان دهید تا کاربر بتواند ارزیابی کند که برای انجام کار چقدر زمان و تلاش لازم است.این موضوع را می توان با نشان دادن هر مرحله، یا میزان درصد تکمیل شدن نشان داد. هرکدام از آنها به کاهش ترک کردن صفحه کمک می کند.نمایش مراحل پیشرفت در فرایند خرید از سایت آمازون- دکمه های رادیویی و چک باکس ها را به صورت سطری (عمودی) قرار دهید نه در کنار هم. مرور و تصمیم گیری در این حالت برای کاربر آسانتر است.نحوه قرارگیری دکمه های رادیویی نسبت به همبه کاربر نشان دهید چه مقدار اطلاعات لازم است. به عنوان مثال اندازه فیلد را طوری تنظیم کنید تا تعداد حدودیِ کاراکترها نشان داده شود.ابعاد متفاوت فیلدها برای ورودی های مختلف3. فوکوس خودکار (auto-focus) را اعمال کنیدجلب توجه کابر به اولین آیتم باعث میشود تا کاربر بداند از کجا باید شروع کند.مطمئن شوید auto focus را اعمال کرده اید تا در هر لحظه مشخص شود کدام فیلد باید پر شود.نحوه auto focus باید یک سرنخ بصری باشد، مانند تغییر رنگ حاشیه یا پس زمینه فیلد انتخاب شده، یا نمایش نشانگر چشمک زن (cursor) در فیلد مورد نظر.تأکید بصری بیشتری بر روی فیلدهای فعال داشته باشید. استفاده از رنگ های قویتر و افزایش ضخامت خط کادر دور فیلد از تکنیک های معمول است. برای همه ی فرم از یک استایل استفاده کنید تا یک دست باشد.این کار علاوه بر صرفه جویی در وقت و کاهش مراحل، باعث آرامش کاربر شده و وی را برای ادامه کار ترغیب می کند.مشخص کردن فیلدی که در این لحظه باید پر شود4. گروه بندی منطقی ایجاد کنیدممکن است کاربران با دیدن یک فرم طولانی که نیاز به اطلاعات دقیق و زیادی دارد دلسرد شوند.گروههای منطقی از فیلدها را تعریف کنید و بخش ها یا زیرمجموعه های کوتاه تری ایجاد کنید.با این حال ، بعضی اوقات استفاده از فرم های طولانی اجتناب ناپذیر است، وقتی این اتفاق می افتد بهترین راه برای مقابله با آن، طراحی فرم های پلکانی است.طراحی پله ای به شما این امکان را می دهد فرم های خود را به بخشها و حتی در صورت لزوم به صفحه های مختلف تقسیم کنید.به جای فیلدهای سفارشی(نیاز به تایپ)، از فیلدهای کشویی یا چند گزینه ای با دکمه های رادیویی استفاده کنید تا به کاربران کمک کنید به طور سریع و کارآمد از فرم های طولانی عبور کنند.هدف ما داشتن سکشن هایی است که بیش از 6 فیلد جداگانه نداشته باشند و به این ترتیب هر بخش با عناوین و فضای خالی (space) قابل شناسایی است.نحوه اولیت بندی محتوا را نیز در نظر بگیرید. باید تقریبا مثل یک مکالمه ی یکپارچه به نظر برسد.این موارد را در نظر بگیرید:طوری که کاربران فکر می کنند و انتظار دارند.اول پراهمیت ترین ها درخواست شوند.راحت ترین ها در ابتدا باشند تا کاربران احساس آرامش و راحتی کنند.گروه بندی فیلدها و جدا کردن هر سکشن با خط5. عنوان لیبل ها را مختصر و واضح انتخاب کنیدبرچسب ها به کاربر اطلاع می دهند که یک فیلد مربوط به چه زمینه ای است. آنها را خارج از فیلد قرار دهید، حالت ایده آل آن تراز از بالا یا شناور است. در این حالت در مقایسه با تراز از چپ، کاربران سریع تر می توانند فرم ها را پر کنند.برچسب های تراز از بالا همچنین برای پیاده سازی در تلفن همراه سازگارتر است.برچسب ها را نزدیک به فیلدی که به آن مربوط است قرار دهید. این جفت باید از جفت برچسب و فیلدهای مجاور فاصله ی مناسبی داشته باشد تا از سردرگمی جلوگیری کند.نسبت به طول اسامی برچسب ها مراقب باشید تا اسکن آنها آسانتر و سریعتر انجام شود. یک یا دو کلمه کافی است در عین حال که از جملات کامل پرهیز شود.از حروف بزرگ (در انگلیسی) خودداری کنید زیرا خوانایی آن دشوارتر است.لیبل های تراز شده از بالا6. برای اطلاعات متنی از placeholder استفاده کنید- متن placeholder توضیحات بیشتری در مورد اطلاعات مورد نیاز، مانند فرمت و محدودیت تعداد کاراکتر ارائه می دهد. متن placeholder را در داخل فیلد قرار دهید.- استایل متفاوتی را برای متن placeholder انتخاب کنید تا به راحتی از فیلدهای تکمیل شده توسط کاربر قابل تشخیص باشد.- متن placeholder هنگام فعال بودن یک فیلد باید ناپدید شود ، از این رو ترجیح داده می شود که هر hint و نکته ای در خارج از فیلد قرار داشته باشد.- از حروف بزرگ(زبان انگلیسی) خودداری کنید زیرا خوانایی آن دشوارتر است.متن placeholder می تواند فرمت مورد نیاز را نمایش دهد- از متن placeholder به عنوان برچسب استفاده نکنید زیرا کاربران ممکن است عنوان فیلدی که در حال پر کردن آن هستند را فراموش کنند.- می توانید حالتی را ایجاد کنید تا متن placeholder بلافاصله پس از فعال شدن فیلد، به بالای فیلد منتقل شده و به برچسب تبدیل شود.تبدیل placeholder به لیبل در هنگام تایپ کردن7. متون CTA را واضح و مختصر بنویسیدعنوان دکمه های CTA باید توصیف کننده عمل یا هدفی که دارند باشد. کاربران میخواهند در مورد اتفاقی که بعد از فشردن دکمه می افتد از قبل آگاه باشند. این کار اعتماد و اطمینان را افزایش می دهد.در مواردی که فرم ها یک عمل اولیه و ثانویه دارند - معمولاً ادامه دادن و لغو کردن - تمایز بصری ایجاد کنید. با استفاده از رنگهای قویتر بر عملکرد اصلی تأکید کنید.در مثال زیر از آمازون ، تأکید بر این است که مردم را به عضویت در Prime سوق دهند. از این رو CTA ثبت نام از برجستگی بسیار بیشتری برخوردار است.CTA آمازونمی توانید تا زمانی که تمام محتوای مورد نیاز در فرمت صحیح وارد نشده CTA را غیرفعال کنید.8. از ابزار مناسبِ هر کار استفاده کنیدهمانطور که در بالا گفته شد کنترل های ورودی مانند دکمه های رادیویی و چک باکس در فرم می توانند به خوبی در وقت صرفه جویی کنند.با این حال مطمئن شوید به استانداردها پایبند هستید تا کاربر را گیج نکنید:- چک باکس ها باید کاربر را قادر به انتخاب چند گزینه از لیست کند. اگر کاربر نیاز دارد که آگاهانه چیزی را انتخاب کند (مانند اشتراک خبرنامه) از آن استفاده نکنید چون همیشه نمی توان تشخیص داد که آیا کاربر چک باکسی را به صورت عمدی یا غیرعمدی در فرم ها خالی گذاشته است یا خیر.- دکمه های رادیویی کاربران را قادر می سازد تا یک انتخاب واحد داشته باشند. آنها نباید در طراحی فرم به زیر دسته ها تقسیم شوند. و به یاد داشته باشید گاهی اوقات هیچ یک از این دو حالت ایده آل نیستند. اگر بیش از 5 گزینه برای انتخاب توسط کاربر دارید، از لیست های کشویی استفاده کنید.در مواردی که شش گزینه یا کمتر وجود دارد ، همه آنها را در فرم ارائه دهید. چک باکس ها- برای لیست های طولانی امکان جستجو را در نظر بگیرید تا از اسکرول های طولانی جلوگیری کرده و به عملکرد سریعتر کمک کند.- از یک چک باکس تکی می توان به عنوان یک پاسخ استفاده کرد، به عنوان مثال پذیرفتن شرایط و ضوابط (اگر نمیخواهید از دکمه CTA استفاده کنید).- برای دکمه ی تکمیل فرم از چک باکس خودداری کنید و به جای آن از دکمه CTA استفاده کنید.9. تایپ کردن را به حداقل برسانیدنیاز به تایپ کردن را برای کاربر به حداقل برسانید. گزینه های دیگر به این دلایل ترجیح داده می شوند:تایپ کردن به زمان بیشتری نیاز داردفعالیت بیشتری لازم داردبیشتر مستعد خطاست، به ویژه در تلفن همراهتجزیه و تحلیل و تشخیص اینکه چه چیزی مورد نیاز است دشوارتر استدر صورت نیاز به متن تایپی، کلیدواژه هایی را در آن قرار دهید. به ویژه اگر نیاز است به یک گزینه خاص برسید. مثلا یافتن عنوان یک شغل.نمایش کلمات کلیدی برای انتخاب توسط کاربرتکنیک هایی را برای به حداقل رساندن میزان جزئیاتی که کاربر به صورت دستی وارد می کند به کار ببرید، اگر میتوانید خودتان اطلاعات را برای آنها پیدا کنید.مثلا کدپستی برای آدرس یا ثبت مشخصات وسیله نقلیه برای پیدا کردن ماشین. این کار باعث کاهش زمان و افزایش اعتماد به نفس می شود.ابزار یافتن وسیله نقلیهبه گفته گوگل، فرم هایی که سرعت کاربران را کاهش می دهند ناامیدکننده هستند و میتوانند نرخ ترک کردن توسط کاربر را افزایش دهند. یکی از راه های کاهش این ناامیدی، به ویژه در فرم های طولانی، ارائه گزینه های برای تکمیل خودکار یا از پیش پر شده است.تکمیل خودکار به کاربر کمک می کند تا با ذخیره اطلاعات اولیه مانند نام، آدرس و جزئیات کارت اعتباری در مرورگرهای کاربر فرم ها را سریعتر تکمیل کند.10. برای افزایش انتقال مفاهیم از تصاویر استفاده کنیداستفاده از آیکون یا تصویرسازی ها در یک فرم یک روش موثر برای کاهش نسبت متن درون فرم است.جلوه های بصری می تواند در مرتبط کردن آنچه کاربر نیاز دارد و آنچه فکر می کند موثر باشد، خصوصاً در مواردی که بیان آن در کلمات برای کاربر آسان نیست، مانند یک سبک مد.همچنین تجربه کاربری را تعاملی تر می کند ، بنابراین احتمال ترک کردن صفحه را کاهش می دهد.نمایش بصری اسم برندها11. بیغام های خطا را معنادار تعریف کنیدخطاها اغلب توسط کاربر و هنگام پر کردن فرم به وجود می آید که البته طبیعی و اجتناب ناپذیر است. به همین دلیل شما به پیغام های خطایی که خوب طراحی شده اند نیاز دارید.برای ایجاد انگیزه در کاربران ، اطمینان حاصل کنید که پیام های خطای شما مفهوم واضحی دارند و به خوبی قابل مشاهده هستند.برای طراحی فرایند اصلاح اشتباهات در فرم ها سه اصل اساسی وجود دارد:پیام خطا باید به راحتی قابل درک و قابل دیدن باشدفیلد (های) دارای خطا باید به آسانی قابل ردیابی باشندکاربران لازم نیست دستورالعمل های رفع خطا را بخاطر بسپارند- وقتی خطایی رخ داد پیام خطا را به همراه یک آیکون در همان فیلد نشان دهید. افزودن یک آیکون به دسترسی پذیری کمک می کند زیرا ممکن است کاربران کم بینا یا دارای کوررنگی نتوانند رنگ قرمز، سبز و خاکستری را تشخیص دهند.- فقط پس از اینکه کاربر یک مرحله را تکمیل کرد از تکنیک های اعتبار سنجی استفاده کنید. هشدار خطا در حین تکمیل کار ناامیدکننده است و موجب حواس پرتی میشود به ویژه هنگامی که کاربر می داند خطا چیست.استثنا در این قانون زمانی است که این هشدار در تکمیل کار کمک کننده باشد مثلا وقتی از کاراکتر های نادرست استفاده میکند.- هنگام اطلاع از خطا، کاربر را به محل خطا ارجاع دهید بنابراین کاربر مجبور نیست آن را پیدا کند.- اگر یک دستورالعمل ساده برای کمک به ورود صحیح وجود دارد، آن را نمایش دهید.- در مواردی که دستورالعمل پر کردن یک فیلد به توضیحات پیچیده تر و بیشتری نیاز دارد، یک دکمه ی اطلاعات بیشتر (tip tool) را در نظر بگیرید که وقتی آن قسمت فعال است به صورت پویا نمایش داده شود.- اعتبار سنجی درون خطی(Inline) می تواند به صورت نکات راهنما، پنجره های بازشو یا متن قرمزرنگ باشد. اعتبار سنجی فرم باید فوری (در زمان پر کردن فرم، نه بعد از اتمام) باشد تا کاربر بتواند بلافاصله اشتباه خود را اصلاح کند. اگر کاربر بعداً مجبور شود به قسمت قبلی فرم برگردد بار وظایف او دو برابر و احتمال خطا حتی بیشتر خواهد شد.- از قرار دادن دکمه های ریست/پاک کردن خودداری کنید زیرا ممکن است به صورت تصادفی همه ی داده ها پاک شوند. آنها به ندرت به کاربران کمک می کنند و خطر داشتن آنها بسیار بیشتر از سود آنهاست.نمایش خطا12. فقط آنچه را بخواهید که واقعاً نیاز دارید کارها را تا حد ممکن بدون چالش و ساده نگه دارید.فیلدهای بیشتر = موانع بیشتر = دلسردی بیشتردر نظر داشته باشید که از روش های دیگری نیز میتوان برای جمع آوری این اطلاعات استفاده کرد.اگر اطلاعاتی میخواهید که ورود آنها اختیاری است صریحا بگویید. برای موارد اختیاری از کلمه "اختیاری" استفاده کنید. هر چیز دیگری به طور پیش فرض اجباری است و باید تکمیل شود.ارائه توضیحات برای دلایل نیاز به اطلاعات خاص می تواند باعث کاهش عدم اطمینان در کاربر شود.اگر این گرفتن این اطلاعات برای کاربر سودمند باشد ممکن است او را برای افزودن اطلاعات دیگری تشویق کند.توضیح اینکه چرا این اطلاعات لازم است13. پشتیبانی با ورود رمز عبور- قبل از اتمام کار توضیح دهید برای تعیین رمز عبور چه شرایطی لازم است. مثلا فرمت، استفاده از کاراکترهای خاص، حروف بزرگ و غیره.- اگر میخواهید در هنگام ورود رمز، شرایط آن به طور دائمی نمایش داده نشوند، آنچه را که کاربر باید وارد کند را هنگام تایپ کردن کاراکترهای های بیشتر، به روز کنید.- کاراکترهای رمز را به صورت پیش فرض پنهان کنید و گزینه ای را برای نمایش گذرواژه به کاربران اضافه کنید، یعنی دکمه ای برای پنهان کردن/نمایش دادن.- هنگام تنظیم رمز ورود، قدرت گذرواژه را مشخص کرده و پس از هر بار وارد کردن کاراکتر، آن را به روز کنید.- اگر Caps Lock روشن است به کاربر هشدار دهید.- گزینه ای جهت بازیابی برای مواردی که رمز خود را فراموش کرده اند ارائه دهید.نمایش قدرت رمز14. بازخورد (feedback)به کاربر اطلاع دهید که فرم آنها با موفقیت تکمیل شده است. آنها را در ابهام باقی نگذارید! به خصوص اگر برای پردازش داده ها و دستیابی به نتیجه نهایی، زمان و تلاش زیادی صرف شده باشد.نماش فیدبک پس از اتمام کار15. کمی شوخ طبعی به خرج دهیدلازم نیست خشک و جدی باشید! بسته به محتوای محلی که فرم در آن قرار دارد، گفتگومحور پیش بروید و کمی طنز را چاشنی تجربه کاربری کنید.در محلی که کاربران تعامل دارند و واکنش های احساسی مثبتی دریافت کنند، تا زمانی که کارآمدی تحت تاثیر قرار نگرفته، میتواند در افزایش نرخ تبدیل موثر باشد!16. آزمون ، آزمایش ، آزمایش.هنگامی که از طرح خود راضی بودید، قبل از انتشار آن را آزمایش کنید!ببینید چه چیزی کار میکند و چه چیزی خیر. برای درک اینکه کاربران در کجا و به چه دلایلی به چالش میخورند، از پروسه های هدف محور استفاده کنید. به این فکر کنید که برای حل این مشکلات چه اقداماتی میتوانید انجام دهید.تکرار و آزمایش مجدد به اندازه مناسب تا زمانی که هم شما و هم کاربران راضی باشید.نتیجه گیریفرم ها برای کسب و کارها ضروری هستند تا بتوانند مشتریان خود را قادر به ارائه اطلاعات و انجام کارهایی مانند خرید محصولات کنند.آنها باید بدون چالش و آسان باشند تا بتوانند نرخ تبدیل بالایی را فراهم کنند.اگر فرم طراحی شده گیج کننده باشد یا برای رفع خطاهای پیش آمده راهنمایی واضحی نداشته باشد، می تواند باعث از دست دادن کاربران بالقوه شود.منابعuxplanet.orguxdesign.cc UX Unicorn Atefeh Khabazian Mon, 07 Dec 2020 19:48:22 +0330 https://virgool.io/ux-unicorn/%DA%AF%D9%84%D8%B3-%D9%85%D9%88%D8%B1%D9%81%DB%8C%D8%B3%D9%85-%D8%AA%D8%B1%D9%86%D8%AF-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-2021-tofssr9kszuu اول از همه بیایید برگردیم به سال پیش، که همه دیوانه وار درباره ترند سال 2020 یعنی نئومورفیسم (Neumorphism) میگفتند صحبت کنیم.طراح: Mary Tokarاز اون موقع تا حالا کلی طراح از این استایل در طرح های خودشون استفاده کردن و حتی در برخی از پروژه های واقعی هم تا حدودی ازش استفاده شد.سلام کنید به گلس مورفیسم (Glassmorphism)!و حالا امسال شاهد ترند جدیدی در طراحی رابط کاربری هستیم که در طول سال گذشته حسابی محبوب شده و داره محبوب تر هم میشه که بهش میگیم گلس مورفیسم.خود این طرح به خودی خود جدید نیست. به عنوان مثال تو طراحی رابط کاربری Windows Vista و IOS 7 و در استایل خیلی از محصولات دیگه هم استفاده شده. همچنین جزوی از دیزاین سیستم مایکروسافت (Fluent Design System) هم هستش که اونجا اسمش Acrylic هست. اواخر امسال هم Mac OS Big Sur عرضه شد که این طراحی رو اعمال کرده بود که باعث شد بیشتر از قبل شناخته بشه.چه جوری کار میکنه؟حالت شناور و شفافی که داره، حس اینکه شئ در فضای سه بعدی قراره داره رو القا میکنه. در واقع مجموعه ای واضح از لایه ها رو در یک فضای سه بعدی مشخص میکنه. البته که پیشنهاد میشه همچون نئومورفیسم، در این طراحی هم ما نباید بیش از حد از این المان در طراحی UI استفاده کنیم. این طراحی وقتی خوب کار میکنه که حداکثر یک یا دو تا از المان های طراحیمون رو این مدل استایل رو روش اعمال کنیم، بقیه المان ها باید دارای کنتراست مناسب باشن.حالا گلس مورفیسم چیه؟ به زبان ساده، یه سطح روشن یا تیره هستش که روی یه پس زمینه رنگی قرار گرفته. پس زمینه رنگی حتما لازمه، تا جلوه طرح کاملا قابل مشاهده باشه چونکه پس زمینه هایی که کنتراست پایینی دارن به راحتی زیر صفحات دیده نمیشن و بیشتر جلوه ما اعمال نمیشه.ما همچنین میتونیم به اندازه 1 پیکسل Outline با رنگ روشن (که حالا خودش هم چند افکت ترنسپرنسی داره) اعمال کنیم تا تداعی گر لبه های شیشه باشه.قدم آخر هم این هست که سایه رو به پایین شئ اعمال کنیم تا عمق شئ احساس بشه.طراح: Ghani Praditaدسترس پذیرینئومورفیسم به خاطر ضعف در دسترس پذیری، در سطح جهانی کنار گذاشته شد. البته این یکی استایل کمی متفاوت عمل میکنه اما بازم مشکلات خودشو داره. مثلا یکی از مزیت هایی که نسبت به نئومورفیسم داره اینه که لازم نیست المان هایی مثل دکمه هم از همون سبک شیشه ای تبعیت کنن پس اینطوری کنتراست بهتری به وجود میاد و تشخیص المان های قابل کلیک برای کاربر راحت تر میشه. اینجور طرح های دکوری (مثل نئومورفیسم و گلس مورفیسم) وقتی بهترین عملکرد رو دارن که همه چیز دکوری باشه. یعنی مثلا اگه یه پس زمینه داشته باشیم، المان های روی آن باید طوری ساختار پیدا کنن و تعریف بشن که وقتی از حالت دکوری خواست در بیاد (به عبارت دیگه از حالت کانسپت دربیاد و در یک محصول واقعی پیاده سازی بشه) باز هم کاربردی باشه. اگه سلسله مراتب مشخص باشه، اونوقت ما میتونیم از این استایل برای هیجان زده تر کردن کاربران استفاده کنیم.منبع: hype4.comشما میتونید منو در شبکه های اجتماعی دنبال کنید:توییتر | اینستاگرام UX Unicorn Ali Ghadyani Sat, 05 Dec 2020 12:54:37 +0330 https://virgool.io/ux-unicorn/natural-mapping-%DA%86%DB%8C%D8%B3%D8%AA-y3z5w1ighwk0 شاید در نگاه اول سوال بی‌اهمیتی باشه و واقعا هم هست. اما وقتی روی یه موضوع بی‌اهمیت هم زیادی حساس بشی ممکنه به درکی برسی که یه جای دیگه به دردت بخوره.مدتی قبل توی اینستا یه نظرسنجی گذاشتم که کدوم یکی رو ترجیح می‌دین و چرا؟ همینطور که از نتایج معلومه اینکه دسته‌ سمت راست باشه اقبال بیشتری داره و جواب افراد به سوال چرا هم به هم نزدیک بود.عموم معتقد بودن چون ما اکثرا راست دستیم و وقتی تو تصوارتمون یه ذره‌بین رو تو دست می‌گیریم با دست راست اون رو نگه می‌داریم، برای همین برامون خوشایندتره که دسته‌ی ذره‌بین رو سمت راست ببینیم.همینطور که اگر magnifying hand رو جستجوی تصویری کنین می‌بینین که عمده‌ی عکس‌ها ذره‌بین توی دست راسته.اما این موضوع چرا مهمه؟چون من رو به سمت مفهومی تحت عنوان Natural mapping هدایت می‌کنه. برای اینکه این موضوع رو درک کنیم لازمه قبلش Mapping رو درک کنیم. توضیح Mapping یا نگاشت یه مقدار سخته و برای توضیحش لازمه از مثال نقشه استفاده کنم.توی نقشه اینجوریه که به ازای هر نقطه‌ای توی نقشه یه ما به ازایی توی دنیای واقعی وجود داره و در حقیقت نقشه کوچک شده‌ی دنیای واقعیه. مپینگ هم از نظر ریاضی یه چنین تعریفی داره:در ریاضیات اگر به ازای هریک از اعضای یک مجموعه، تنها یک عضو در مجموعه ای دیگر وجود داشته باشد می‌گوییم نگاشتی از مجموعه اول به مجموعه دوم وجود دارد. به عبارت دیگر به ازای هر عنصر x در یک مجموعه تنها یک عنصر به نام (f(x در مجموعه‌ای دیگر وجود دارد. - نگاشتنگاشت طبیعی (Natural mapping) یعنی اینکه کنترل‌ها و اطلاعات از نظر بصری با اون شی مرتبط باشه. می‌دونم سخته درکش. اجازه بدین با چند تا مثال توضیح بدم.فرض کنین این دو تا کلید کنار هم رو داریم که کلید سمت راستی لامپ سمت چپ رو روشن می‌کنه و برعکس. بدیهیه که این موضوع خیلی رو اعصابه و کاربر رو همیشه اذیت می‌کنه. چون کاربر بین کلید و لامپ انتظار یه ارتباط نظیر به نظیر مستقمی داره که الان برآورده نشده.با این توضیح اجازه بدین تصویر اول مقاله رو دوباره بررسی کنیم.اینجا اگر گزینه‌ها برعکس بود (یعنی سمت راست نوشته شده بود چپیه و سمت چپ نوشته شده بود راستیه) کاربر اون احساس ناخوشایند رو داشت. هرچند که هنوز هم داره. گزینه بهتر این بود که کلا آیکن‌ها برعکس می‌بود یعنی اونی که دستش سمت راسته رو راست تصویر قرار می‌دادم. اینجوری ارتباط بیشتری بین اطلاعات و شی و کنترل (دکمه نظرسنجی) رخ می‌داد.در حقیقت فرض من اینه که این ۳۴ درصد که به گزینه سمت چپی رای دادن درصد قابل توجهیشون مرتکب این اشتباه شدن و فکر کردن این راستیه و چپیه به دسته اشاره داره و نه تصویر و اگر بر این اساس سوال می‌شد نتیجه خیلی به درصد چپ دست‌ها در جامعه نزدیک‌تر می‌شد.یا نگاهی بندازیم به مثال نخ نمای این تعریف، یعنی اجاق گاز. نمی‌دونم تا الان تجربه‌ی کار کردن با اجاغ‌گاز جدید رو داشتین یا نه؟ بعضی گازها هستن که در اولین مواجهه نمی‌دونی کدوم دسته برای کدوم مشعله. در این مثال، تصویر سمت چپ این ضعف رو داره. چون شکل مشعل‌ها مربعه و شکل قرارگیری دسته‌ها خطی، مرتبط کردن نظیر به نظیر اینها همیشه توان ذهنی بیشتری از مغر می‌کشه تا کاربر متوجهش بشه. اما در تصویر سمت راست چون محل قرارگیری دسته‌ها متناسب با شعله‌هاست این پردازش ذهنی تا حد خیلی خوبی کم شده.شاید شما هم مثل یکی از دوستان من معتقد باشین که کاملا مشخصه که کدوم به کدومه اما برای خود من هر سری که بعد مدت‌ها میام خونه و می‌خوام اجاغ گازی که ۵ تا شعله داره رو با این دستگیره‌ها روشن کنم به مشکل می‌خورم. اول اینکه چون قدیمیه تصویر کنار دستگیره‌ها کمرنگ شده و از این زاویه هم مشخص نیست. دوم اینکه تو نگاه اول ۶ تا دستگیره شبیه به همه با ۵ تا شعله. سوم هم اینکه چیدمان شعله‌ها ۲-۱-۲ اما دستگیره‌ها خطی. یا می‌تونیم به جهت چرخش فرمون با جهت حرکت ماشین یا مدل کنترل دسته‌ی راهنما و چراغ ماشین توجه کنیم و این ارتباط کنترلر با شی رو درک کنیم.در مثال آیکن جستجو هم این کنترلر (دسته) با دست راست گرفته می‌شه و به مرکز صورت میاد برای همین بهتره که حتما از آیکن با دسته سمت راست استفاده کنیم.اگر اصل دوم Heuristic Evaluation یعنی هماهنگی سیستم با جهان واقعی رو یادتون باشه، اونجا گفتم که طراحی ما هرچقدر بیشتر شبیه دنیای واقعی باشه کاربر راحت‌تر با طراحی ما ارتباط می‌گیره.از طرفی اگر Search icon رو گوگل کنین می‌بینین که عمده‌ی دسته ذره‌بین آیکن‌ها سمته راسته.احتمالا اولین نفری که آیکن ذره‌بین رو برای جستجو طراحی کرده این تفکرات توی ذهنش بوده و پس از اون به دلیل Mental Model و Jakob’s Law، همه همین مدلی ازش استفاده کردن و الان هم بهتره همین رویه رو ادامه بدین قرینه‌اش نکنین.کاربران بیشتر زمان خود را در سایت‌های دیگران می‌گذرانند در نتیجه ترجیح می‌دهند به همان روشی که تعامل با دیگر سایت‌ها را آموخته‌اند با سایت شما هم کار کنند و مجددا نیاز به یادگیری نباشد. - قانون جیکوبهدر وبسایت نماوانکته‌ی آخری که باقی می‌مونه قرینه شدن این آیکن به دلیل زبان راست به چپ فارسیه. قبلا در مقاله‌ی چه پترن‌هایی در زبان فارسی قرینه می‌شوند؟ و دکمه اصلی سمت راست باشه یا چپ؟ دلایل خودمو برای قرینه نکردن خیلی چیزها گفتم. در اینجا هم تمامی نکاتی که مطرح کردم جهان شمول بود و معطوف به یک زبان خاص نبود. در نتیجه به نظرم بهتره که در زبان فارسی هم از همین ترکیب استفاده کنین و همین رویکرد تصمیم‌گیری رو برای سایر آیکن‌هایی که طراحی یا استفاده می‌کنین در نظر بگیرین.اگر این مقاله براتون جذاب بوده فراموش نکنین که با منتشر کردنش هم منو علاقه‌مند به ادامه می‌کنین و هم دوستانتون شما رو به عنوان منبع دانش روز به یاد خواهند آورد. UX Unicorn امیر تقی آبادی Sun, 09 Aug 2020 00:24:12 +0430 https://virgool.io/ux-unicorn/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B5%D8%B1%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-%D8%AA%D8%B9%D8%A7%D8%AF%D9%84-balance-livzjgciy5rs قسمت اول: مرورکلیقسمت دوم: یکپارچگیقسمت سوم: تعادل(همین پست!)قسمت چهارم: ترازقسمت پنجم: سلسه مراتبیقسمت ششم: تضادقسمت هفتم: نسبتقسمت هشتم: فضای منفینکته: اگر اولین باره با سری مقالات از دوره طراحی بصری مواجه شدین و میخواین با کلیت ماجرا بهتر آشنا بشین، پیشنهاد میکنم ابتدا دو مطلب قبلی رو یه دور بخونین و بعد به این صفحه بیاید تا روند دوره براتون جابیفته. ......مقدمه ای بر تعادل:کلمه "تعادل" در خیلی از نوشته‌ها استفاده میشه و کاربرد های زیادی هم داره؛ مثلا تعادل تو رژیم غذایی یا هم‌معنی با عدالت تو سیستم قضایی ویا حتی ایستادن روی دوپا! تعادل به‌طور معمول چیز خیلی خوبیه. برای همینه تو خیلی جاها هیچکس نمیخواد ذره‌ای از عدالت و تعادل غافل بشه.. همین مسئله تو طراحی هم صادقه. تعادل یکی از عوامل تعیین‌کننده میزان مطلوبیت طرح شماست.تو دنیای فیزیکی، اجسامی که وزن یکسانی دارن، در یک مقیاس خاصی بین خودشون تعادل برقرار میکنن؛ اما تو طراحی میزان تعادل تحت‌تاثیر توزیع یکنواخت وزن بصریه! یعنی هرچقدر وزن‌بصری هدفمندتر تو صفحه پخش بشه، تعادل هم بیشتره =)وزن بصری(Visual weight)یک توپ بسکتبال و یک توپ بولینگ رو در نظر بگیرین. بر اساس اندازه‌ی نسبی هردو، انتظار میره وزنشون هم یکی باشه! درحالیکه تجربه ثابت‌کرده اینطور نیست و وزن یک توپ بولینگ خیلی سنگین‌تر از یک توپ بسکتباله.با این حال، در طراحی ما محدود میشیم به درک خودمون. درسته که این دو جسم از نظر وزن فیزیکی متفاوتن اما تو تصویر بالا چون از نظر بصری متعادل به نظر میان، به یک‌اندازه برای جلب توجه ما رقابت میکنن.مترجم: در اینجا لازمه توضیحی اضافه‌ کنم مبنی بر اینکه هر عنصر در صفحه یک وزن بصری داره که باعث جلب توجه و حتی جهت‌دهی نگاه ما مخاطبان میشه. این پاراگراف به این اشاره داره که هر چقدر وزن بصری دو شی یکسان باشن، میزان جلب توجهشون از چشم و نگاه ماهم برابره. قانون دیگه اینه که هرچقدر وزن‌بصری یک عنصر بیشتر باشه، جلب توجه بیشتری رو به همراه داره!وزن‌بصری در حقیقت همون وزنی از عنصر هست که مخاطب درک‌میکنه یا به اصطلاح لاتین Perceived weight که مقیاسی هست برای اندازه‌گیری میزان تفاوت یک عنصر در مقایسه با بقیه عناصر؛ البته از دید مخاطب!عوامل موثر بر وزن بصریوزن‌بصری میتونه با تغییر در فاکتورهایی مثل اندازه، رنگ، تضاد(کنتراست) و یا تراکم یک عنصر تغییر کنه!بیاین همه‌ی این عوامل رو برابر فرض کنیم. حالا می‌تونیم تاثیر هرکدوم از این عوامل رو بسنجیم(به تنهایی)تغییرات وزن‌بصری بر اساس اندازه(مقدار): موثرترین عامل در میزان افزایش یا کاهش وزن‌بصری، اندازه‌س!همونطور که در تصویر پایین می‌بینید، مربع سمت چپ وزن بصری بیشتری نسبت به مربع سمت راست داره.تغییرات وزن‌بصری بر اساس رنگ: رنگ نقش کمتری در تغییرات وزن‌بصری داره(نسبت به اندازه!) درک ما از رنگ در حقیقت تناسب رنگ اصلی یک شی با رنگ‌های اطرافش هست. در مثال زیر، مربع قرمز توجه مارو جلب میکنه چون وزن بصری بیشتری نسبت به مربع زرد داره. البته تو مثال بعدی می‌بینید که این مسئله همیشه هم صدق نمیکنه!تغییرات وزن‌بصری بر اساس تضاد(کنتراست): با استفاده از همون مربع‌های رنگی مثل نمونه قبلی، می‌تونیم ببینیم که چطور کنتراست می‌تونه درک ما از رنگ رو به شدت تغییر بده. یه پس‌زمینه قرمز تیره باعث کاهش کنتراست برای مربع سمت چپ(مربع قرمز) و در مقابل، افزایش کنتراست برای مربع سمت راست(مربع زرد) میشه. که همین مسئله توجه مارو به سمت مربع سمت راست یا زرد جلب میکنه، نه؟تغییرات وزن بصری بر اساس تراکم: با وجود اینکه اندازه، رنگ و کنتراست هر دو مربع برابره اما مربع راست به دلیل داشتن تراکم بیشتر نسبت به مربع چپ، وزن بصری بیشتری هم داره(perceived density). در این مقاله می‌تونید در ارتباط با تاثیر فضای سفید بر تعادل بخونید( البته اگه فعلا نمیتونید با اصطلاحات انگلیسیش ارتباط بگیرید، هیچ اشکالی‌نداره! چرا که در چند هفته‌ی آینده ترجمه میشه و در صفحه‌مون قرار میدیم=) )خب تا اینجا تو هرکدوم از این مثالها دیدیم که تغییرات جزئی در اندازه، رنگ، کنتراست یا تراکم چطور می‌تونه رو وزن‌بصری یک عنصر در صفحه‌ی شما تأثیر بذاره. در ادامه خواهیم‌دید، این فاکتورها می‌تونن برای ایجاد حس تعادل در طرح شما باهم ترکیب بشن یا نه؟ نظر شما چیست؟! =)تعادل در مقابل تنشبدون حضور عامل تعادل، تنش‌بصری به‌وجود میاد که براحتی می‌تونه بر نحوه‌ی درک دیگران از طرح ما تاثیر بذاره(منظور از تنش همون بی‌تعادلی یا عدم‌تعادله)تصویر بالا جوری ویرایش‌شده که نامتعادل به‌نظر برسه. با وسط‌چین شدن متن حول محور عمودی تعادل از نوع تقارن به وجود اومده. با این حال، سمت چپ صفحه از نظر وزن‌بصری سنگین تره، که باعث ایجاد تنش‌بصری میشه. این تنش‌بصری ذهن مارو وادار میکنه که فکر کنه ای‌بابا.. یه جای کار میلنگه!در طرح اصلی وزن بصری بطور مساوی بین هر دو بخش صفحه تقسیم شده.(اینجا رو ببینید)نظر خیلی ها در مورد اینکه تصویر دوم بهتر از تصویر اوله، مثبته!؛ چون مغز ما تمایل و گرایش بیشتری به تعادل داره تا تنش. این به این معنی نیست که کلا نباید تنش ایجاد کرد، بلکه باید با احتیاط و هدفمند از ازش استفاده کرد. تعادل و تنش نه باهم سازگارن و نه ناسازگار. با استفاده از مثال بالا، ممکنه یک طراح بدون ایجاد اختلال در تعادل، توجه بیشتری به دکمه سمت راست نسبت به دکمه سمت چپ جلب کنه. این رابطه اصلی/فرعی بودن بین دکمه‌ها چیز جدیدی نیست. با ترکیب عوامل موثر بر وزن‌بصری میشه از ایجاد تنش بیش‌از حد جلوگیری کرد.در اینجا رنگ اصلی که نشون دهنده‌ی تنش یا عدم تعادله، نارنجیه. یه طراح ممکنه برای ایجاد تعادل یا تنش بصورت همزمان، مراحل زیرو طی کنه:اولین تغییر منجر به عدم تعادل در کنتراست میشه. خواندن دکمه اصلی نه تنها دشوارتر شده، به نظر می‌رسه که دکمه فرعی هم وزن‌بصری بیشتری پیدا کرده. این چیزی نیست که ما دنبالشیم.در دومین تغییر مسئله کنتراست رو برطرف کردیم، اما حالا دکمه اصلی در مقایسه با دکمه فرعی بسیار سنگین‌تر احساس میشه.در سومین تغییر، تراکم دکمه فرعی رو هم تنظیم کردیم تا با دکمه اصلی مطابقت‌باشه. این منجر به تعادل و تنشی مناسب میشه و ماهم همینو میخوایم.چهار نوع تعادلچهار روش برای رسیدن به تعادل در طراحی وجود داره. اغلب‌اوقات، تعادل در دو طرف یک محور نامرئی، برقراره. حالا این محور افقیه یا عمودی فرقی نمیکنه. این مسئله دلالت بر جهت‌گیری بصری طراحی شما داره. تعادل میتونه بصورت محور مورب یا چند محوره هم برقرار بشه اما نوع افقی و عمودی از همه رایج‌تره.تعادل به سبک متقارن یا رسمی(متداول): مثال‌های زیادی در طبیعت هستن که دلالت بر تقارن دارن مثل چهره ی انسان یا نقوش بال پروانه ها. تعادل متقارن (رسمی) با انعکاس‌دادن اشیاء در یک یا چند محور انجام میشه. در زیر مثالی از تقارن بازتابنده رو باهم میبینم که در اون دو جسم یکدیگر رو در یک محور عمودی بازتاب میدن.تعادل متقارن غالباً برای بیان حس لطف، ظرافت و تشریفات استفاده میشه. با این‌حال، تقارن بیش از حد در یک طرح میتونه خشک و کسل‌کننده باشه. در مثال بالا، آدام داناوی از تعادل به شیوه‌ی تقارن استفاده‌میکنه، ولی با این‌حال اینقدر هر طرف نسبت به اون یکی متفاوته که جذابیت طرح حفظ‌ شده.تعادل به سبک غیرمتقارن یا غیر رسمی(غیرمتداول): عدم تقارن رو هم میتونیم تو طبیعت ببینیم مثل درختان یا سازه‌های سنگی. بر اساس تعریف کلمه "عدم تقارن" نشون‌دهنده عدم برقراری تقارنه. با این حال، تعادل رو میشه با عناصر نامتقارن هم ایجاد کرد.در مقابل تقارن که ممکنه یه ذره یکنواخت باشه، میتونیم از عدم تقارن استفاده کنیم تا یک طراحی پویاتر و سرزنده تر داشته باشیم. در مثال بالا، ریکاردو مستر یک طراحی دلپذیر و منسجم با تعادل نامتقارن رو بهمون نشون میده.تعادل شعاعی: تعادل شعاعی(یا دایره وی) زمانی بوجود میاد که عناصر نسبت به نقطه‌کانونی ظاهر میشن. از این روش میشه برای جلب‌توجه به مرکز طراحی هم استفاده‌کرد.در سال 1996 ، اسپیس جم وبسایت خودش رو راه‌اندازی کرد، که شامل یک طراحی متوازن شعاعی بود. لوگو وبسایت در مرکز توجه قرار داره که نشون‌میده ناوبری ازش بیرون میاد. اینروزا تعادل شعاعی در طراحی کمتر متداوله، اما نباید از تسلط بهش غافل بشید!تعادل موزائیک: تعادل موزایک (یا اصطلاحا کریستالوگرافی) رو میتونیم "آشوب سازمان‌یافته" هم معنی‌کرد. این نوع تعادل از یک الگوی تکراری پیروی میکنه که سهم همه‌ی عناصر در اون برابره.یکی از نمونه‌های این نوع تعادل وبسایت پینترسته. عدم لحاظ تراز عمودی بین عناصر در نگاه اول ممکنه کمی مخاطب رو آشفته کنه اما تراز افقی و هماهنگی بین عناصر به سازماندهی هرچه بیشتر طرح کمک‌میکنه.نتیجه گیریوقتی همه‌چیز متعادل باشه، هارمونی ایجاد میشه. فاکتور تعادل در طراحی به دلیل رسیدن به هماهنگی و یکپارچگی لازمه(مقاله مربوط به یکپارچگی رو خوندین؟ اگه نه اینجا کلیک کنین) عدم تعادل میتونه منجر به تنش‌بصری بشه که در بیشتر موارد باید از اون جلوگیری کرد. اما اگر دقیق و هدفمند انجام بشه، میشه ازش برای رسیدن به نتیجه مطلوب استفاده کرد.هنگام طراحی یک طرح، یک قدم جلو برید و از خودتون بپرسید که آیا ترکیب کلی طرح حس تعادل داره یا نه؟!اگر یک عنصر توجهی بیش از حد از مخاطب جذب میکنه و این خواسته ما نیست؛ پس با تغییر تو عواملی مثل اندازه، رنگ، کنتراست و تراکم میشه وزن‌بصری رو بصورت یکسان بین عناصر پخش کرد.چهار نوع از تعادل در طراحی وجود داره که سه نوع از تقارن، نامتقارن و موزاییک در طراحی رابط کاربر متداول ترن؛ اما این نباید باعث بشه که شما تعادل شعاعی رو تو طراحیاتون امتحان نکنید. هر نوع از تعادل قابلیت ترکیب شدن با دیگری رو داره و این امر میتونه تولد یک طراحی سرزنده و خلاقانه رو سبب بشه! ***و بله! این دفترم به اتمام رسید اما حکایت همچنان باقیه! اما چند نکته درادامه..یک» من صرفا مترجم این مقاله هستم و مطلب اصلی رو میتونین در این لینک ببینید. و برای مطالعه بیشتر در این‌ زمینه میتونین به این لینک‌ها هم سر بزنید:https://www.smashingmagazine.com/2014/12/design-principles-visual-weight-direction/https://lisacharlotterost.de/2014/06/18/Tension-and-Balance-in-Graphic-Design/دو» ممنونم که تا انتهای این مقاله با من همراه بودین. یادتون نره که این سری مقالات و دوره طراحی‌بصری هنوز تموم نشده؛ پس حتما برای خوندن مقاله‌ی بعدی مارو دنبال‌کنید.سه» از آقای محمد شریفی، هم‌تیمی من، که در ویراست این مقاله کمکم کردن تشکر میکنم.اگر فکر میکنین دوستان و همکارانتون به خوندن این مطلب علاقه دارن، براشون بفرستین! لطفا حتما نظراتتون، چه انتقاد و چه پیشنهاد، رو هم برامون بنویسید:) با آرزوی بهترین ها UX Unicorn گلناز شهشهانی Sun, 02 Aug 2020 10:53:13 +0430 https://virgool.io/ux-unicorn/25-%D8%A7%D8%B5%D8%B7%D9%84%D8%A7%D8%AD-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%D9%BE%D8%B0%DB%8C%D8%B1-%DA%A9%D9%87-%D9%87%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD-ux-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D8%A7%D9%86%D8%AF-js1d83dzafat کاربردپذیری و تجربه کاربر را نمی‌توان از هم جدا کرد. اغلب می‌بینیم که ذینفعان از آن‌ها بجای یکدیگر استفاده می‌کنند. آنها اصطلاح ("Usable " یا "قابل استفاده" ) را به طور مستقیم استفاده نمی‌کنند، اما هر آنچه که آنها اشاره می‌کنند با قابلیت استفاده‌ی محصول ارتباط نزدیکی دارد. یادگیری این اصطلاحات کاربردپذیر ویژه برای طراحان جدید برای ایجاد تفاهم مشترک در بین اعضای تیم مفید خواهد بود. همچنین به ذینفعان این امکان را می‌دهد که به جای عبارات مبهم و نه چندان مفید، بازخورد مناسب و سازنده را ارائه دهند. اینها فقط اصطلاحات نیستند، بعضی از آنها اصول، روش‌ها و فرایندها هستند.1.امتیازات (Affordances)هزینه مناسب به ویژگیهای درک شده و واقعی محصول اشاره دارد. در درجه اول به آن خصوصیات اساسی که فقط نحوه استفاده از کالا را تعیین می کند. مثلا صندلی امکان نشستن را دارد. صندلی را نیز می‌توان حمل کرد. یک طراح خوب اطمینان می‌دهد که چه اقداماتی مناسب و قابل درک یا نامناسب هستند.2. تحلیل رقبا (Benchmarking)محک زدن یک محصول یا وب سایت در برابر رقبا برای شناسایی ویژگی‌هایی که کاربردپذیری را بالا می‌برد مفید است و وقتی که یک نسخه از یک محصول / وب سایت با نسخه بعدی خودش مقایسه شود، می‌تواند اثبات کننده تاثیر کاربردپذیری باشد. https://momtazkala.com/blog/%D8%A8%D9%86%DA%86%D9%85%D8%A7%D8%B1%DA%A9-benchmark-%DA%86%DB%8C%D8%B3%D8%AA-%DA%86%D9%87-%D8%A7%D9%87%D9%85%DB%8C%D8%AA%DB%8C-%D8%9F/ 3.چانکینگ (Chunking)هدف اصلی chunking کمک به شرایطی است که تعهد اطلاعات به حافظه کار ضروری باشد. chunking با شکستن رشته‌های طولانی از اطلاعات در تکه‌هایی با اندازه بیت که به خاطر سپردن آنها آسان‌تر است، در این فرایند کمک می‌کند، به خصوص هنگامی که حافظه با محرک‌های رقابتی روبرو می‌شود.4.راههای شناختی (Cognitive Walkthrough)راههای شناختی روشی برای ارزیابی کاربردپذیری استفاده از محصول است که در آن یک یا چند ارزیاب از طریق یک سری کارها کار می‌کنند و مجموعه ای از سوالات را از دید کاربر می‌پرسند. تمرکز مسیر پیشرفت شناختی بر درک قابلیت یادگیری سیستم برای کاربران جدید یا نادر است. https://vrgl.ir/N58fR 5.محدودیت (Constraint)محدودیت‌ها تعداد گزینه‌های مختلف را برای هر موقعیت خاص کاهش می‌دهد. هنگام معرفی کاربر با سناریوی ناآشنا با محدودیت‌ها می‌توانید خطاهای کاربر را به میزان زیادی کاهش دهید. مثلا در قیچی، اندازه سوراخ‌ها محدودیت‌هایی برای محدود کردن انگشتان ممکن است ایجاد کنند. 6.مدل مفهومی (Conceptual Model)مدل‌های مفهومی به گونه‌ای طراحی شده‌اند که به ما در ارتباط با هدف اصلی طراحی برنامه کمک می کند. هرچه مدل مفهومی نزدیک به مدل ذهنی کاربر باشد، درک آن برای کاربر آسان است. https://vrgl.ir/dIuei 7.قابلیت کشف (Discoverability)این میزان آسانی است که کاربر می‌تواند تمام عناصر و ویژگی‌های یک سیستم جدید را اولین بار درآن پیدا کند.8.بهره‌وری (Efficiency)هنگامی که کاربران طراحی را فرا گرفتند، چقدر سریع می‌توانند وظایف خود را انجام دهند؟9.خطاها (Errors)چند خطا در کاربران ایجاد می‌کنند، این خطاها چقدر شدید هستند و چقدر راحت میتوان خطاها را بازیابی کرد.10.بازخورد (Feedback)اطلاعات کامل و مداومی درباره نتایج اقدامات و وضعیت فعلی محصول یا خدمات وجود دارد. بعد از اینکه فیدبک‌ها اعمال شد، تعیین وضعیت جدید آسان است.11.عطر و بوی اطلاعات (Information Scent)عطر و بوی اطلاعات اشاره دارد به چه میزان کاربران می توانند پیش‌بینی کنند که اگر مسیر خاصی را از طریق وب سایت دنبال کنند، چه پیدا می‌کنند. این اصطلاح بخشی از نظریه ( تغذیه اطلاعات ) information foraging theory است، که نحوه تعامل کاربران با سیستم‌ها را با استفاده از قیاس حیواناتی که در حال شکار مواد غذایی هستند، توضیح می‌دهد.12.یادگیری (Learnability)اولین بار که کاربران با رابط کاربری روبرو می‌شوند ، چقدر برای آنها کار با رابط کاربری آسان است و اگر تسکی رو انجام بدهند چندبار باید اون تسک رو تکرار کنند تا یاد بگیرند.13.مپینگز (Mappings)رابطه بین کنترل‌ها و عملکرد آنها و نتایج حاصل از آن. Natural mappings اساس سازگاری محرک-پاسخ است، وقتی رابطه هماهنگی بین آنچه مشاهده می‌کنید و اینکه چگونه باید به آن پاسخ دهید وجود دارد،رخ می‌دهد.14.ماکسیمرز (Maximizers)ماکسیمرز Maximizer یکی از دو دسته از افراد در رویکرد تصمیم گیری است. Maximizer کسانی هستند که نتخاب کنند که چه کسانی بعداً بیشترین سود را به آنها می‌دهد. به گفته یک روانشناس آنها در حین تصمیم‌گیری، استانداردهای بالایی را تعیین می‌کنند و غالباً ناامید می‌شوند که نتوانند به آنها برسند.کاهش تعداد انتخاب‌های ارائه شده به کاربران، یکی از ویژگی‌های مهم یک محصول قابل استفاده است.وی افزود: "افزایش دامنه گزینه‌ها لزوماً منجر به رضایت بیشتر از نتیجه تصمیم نمی‌شود. در هر صورت، انتخاب ممکن است در حقیقت مانع از توانایی ما در لذت بردن و قدردانی از آن شود."- شوارتز - پارادوکس از انتخاب15.در یاد ماندن (Memorability)هنگامی که کاربران پس از یک دوره استفاده نکردن از محصول به آن برگردند، چگونه می‌توانند دوباره با محصول ارتباط برقرار کنند؟ 16.اشتباه (Mistake)اشتباه، خطاهایی که در انتخاب یک هدف یا مشخص کردن روشی برای رسیدن به آن اهداف ایجاد می‌شود، هستند. شخص هدف را تعیین می‌کند. اگر هدف مناسب نباشد، این یک اشتباه است. اگر عمل همان چیزی نیست که در نظر گرفته شده بود، این یک لغزش است.اشتباهات و لغزشها به هم نزدیک هستند. 17. پروگرسیو دیسکلوزر (Progressive Disclosure)ویژگی‌های پیشرفته یا به ندرت استفاده شده از صفحه نمایش ثانویه را نشان می‌دهد چون یادگیری برنامه‌های کاربردی آسان‌تر و کمتر مسنعد خطا هستند.18.حافظه آینده نگر (Prospective Memory)حافظه آینده‌نگر به یادآوری اجرای یک عمل در آینده اشاره دارد، علاوه بر به یاد آوردن عملکرد مورد نظر و هنگامی که قرار است انجام شود، حافظه آینده نگر ما را ملزم می‌کند که در همان لحظه مناسب، عمل مورد نظر را انجام دهیم.19.رضایت بخش (Satisficers)رضایت بخش‌ها دسته دوم افراد را در رویکرد تصمیم‌گیری تشکیل می‌دهند. هنگامی که به تصمیم گیرندگان رضایت داده می‌شود، تصمیم خود را برای دستیابی یا حفظ وضعیت در نظر می‌گیرند، سپس گزینه‌های خود را برای یافتن راه حلی که مطابق با الزامات آنها باشد ارزیابی می‌کنند.20.نشانگر‌ها (Signifiers)نشانگر به هر علامت یا صدا اشاره دارد، هر نشانگر قابل تصور که رفتار مناسب را با شخص برقرار می‌کند.Signifier در درک هزینه یك شی كمك می‌كند. تركیب كننده‌ها می‌توانند حساب شده و عمدی باشند، مانند علامت PUSH روی یك درب، اما آنها نیز ممكن است اتفاقی و غیر‌عمدی باشند، مانند استفاده ما از دنباله قابل رویت ساخته شده توسط افراد قبلی از یک زمین پوشیده از برف برای تعیین بهترین مسیر.21.لغزش‌ها (Slip)لغزش‌ها خطایی در انجام یک روش در نظر گرفته شده برای رسیدن به یک هدف هستند. شخص قصد عمل را تعیین می‌کند. اگر قصد مناسب نباشد، این یک اشتباه است. اگر عمل همان چیزی نیست که در نظر گرفته شده بود، این یک لغزش است.بیشتر خطاهای روزمره لغزش است. قصد انجام یک عمل را پیدا کنید، خودتان را به انجام دیگری برسانید. مثال مشخص استفاده از کلید اشتباه برای باز کردن درب، تلاش زیاد و استفاده از تکنیک‌های مختلف برای باز کردن درب است که فکر می‌کنید کلید درست است.22.حافظه مکانی (Spatial Memory)حافظه مکانی یک فرآیند شناختی است که به فرد امکان می‌دهد مکانهای مختلف و همچنین روابط مکانی بین اشیاء را به خاطر آورد. که این امکان را برای کاربر ایجاد می‌کند که روابط بین اشیا را بخاطر بسپارد.در تعامل انسان و کامپیوتر، حافظه مکانی بسیاری از همان مزایایی را که در دنیای واقعی دارد فراهم می‌کند: دانش مکانی قوی از چیدمان‌های رابط و مکان‌های کنترل، به ویژه در رابط‌های گرافیکی کاربر، به کاربران این امکان را می‌دهد تا تلاشهای شناختی و بدنی مورد نیاز برای تعامل را بطور اساسی کاهش دهند.23.سیستم ایمیج (System Image)سیستم ایمیج به عنوان پلی بین مدل مفهومی اساسی برنامه و مدل ذهنی کاربر است. System Image بخش قابل مشاهده و قابل درک برنامه است. مدل ذهنی کاربر برنامه تا حد زیادی تحت تأثیر System Image است.24.تجزیه و تحلیل تسک‌ها (Task Analysis)تجزیه و تحلیل وظایف، اقدامات و فرآیندهای شناختی مورد نیاز کاربر را برای انجام یک کار یا دستیابی به یک هدف خاص مشخص می کند.دو نوع اصلی تجزیه و تحلیل وظیفه هست:تجزیه و تحلیل وظایف شناختی: متمرکز بر درک وظایفی است که نیاز به تصمیم‌گیری، حل مسئله، حافظه، توجه و قضاوت دارد.تجزیه و تحلیل وظایف سلسله مراتبی: تسکهای بزرگ به سلسله مراتب تسک های فرعی‌‌تر تجزیه می‌شود.25.روش بلند فکر کردن (Think Aloud Protocol)در یک تست بلند با صدای بلند، از شرکت کنندگان در آزمون بخواهید تا ضمن اینکه با صدای بلند مدام فکر می‌کنند، تست را انجام دهند، یعنی صرفاً گفتگو کردن افکارشان هنگام حرکت از طریق رابط کاربر.جیکوب نیلسن آن را ابزار قابل استفاده می‌داند زیرا ارزان، انعطاف پذیر، قوی و قانع کننده است.مقاله اصلی را می‌توانید از اینجا مطالعه کنید. UX Unicorn زیبا نوربخش Wed, 29 Jul 2020 19:48:52 +0430 https://virgool.io/ux-unicorn/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B5%D8%B1%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-%DB%8C%DA%A9%D9%BE%D8%A7%D8%B1%DA%86%DA%AF%DB%8C-unity-jhbqim0whlgy قسمت اول: مرورکلیقسمت دوم: یکپارچگی (همین پست!)قسمت چهارم: تعادل قسمت سوم: ترازقسمت پنجم: سلسه مراتبی قسمت ششم: تضاد قسمت هفتم: نسبتقسمت هشتم: فضای منفیآموزش رایگان طراحی بصری - قسمت دوم: یکپارچگی خانه ای که در برابر خودش تقسیم شده، هرگز پایدار نمی‌ماند.- آبراهام لینکلندر اینجا منظور آبراهام لینلکن از «خانه» ایالات متحده آمریکا هست، درست کمی قبل از شروع جنگ های داخلی آمریکا. لینکلن در ادامه میگه، کشورش نصف آزاد و نصف برده هستن. دو پیام بسیار متفاوت درباره آنچه که کشورش درگیرش بود. او کسی بود که ایالات متحده رو یکپارچه کرد و قانون برده داری رو منسوخ کرد.نکته لینکلن فراتر از وضعیت سیاسی-اجتماعی زمان خودش هست. ایالات متحده وقتی تقسیم بشه پایداریش رو از دست میده. این نکته قابل تعمیمه به طراحی! اگر یک طرح بدون هدف بخش بندی بشه و هر بخش یه ساز بزنه، انسجام کل طراحی زیر سوال میره. هر بخشی باید در راستای یک هدف واحد و یکپارچه باهم کار کنند.ایده ی یکپارچگی و انسجام طرح در طراحی، همون پیروی تمام اجزاء از یه هدف واحده.[1]اصول یکپارچگی در طراحییکپارچگی معیاری هست برای سنجش میزان پیوستگی عناصر در طراحی شما. دقیق بگیم، کلیت طرح رو توصیف میکنه! مثلا هر مؤلفه (component) چقدر با بقیه مؤلفه ها هماهنگه؟ یکپارچگی مهمترین اصل طراحی هست چرا که تمام طراحی تون رو به عنوان یک واحد منسجم در میاره.آشنایی با یکپارچگیدر این دوره هر کدوم از اصول طراحی مربوط به یک «بخش» از طراحی شما میشه که اصل یکپارچگی همشون رو در بر میگیره (رو همشون تاثیر داره).یکپارچگی هدف نهایی طراحی واسط کاربری هست، اما این به این معنی نیست که این اصل رو نگه دارید که آخرسر لحاظش کنید، بلکه برای اینکه طراحی تون به یک حس یک دستی برسه، نیاز دارید که از قبل براش برنامه ریزی کنید و تصمیم بگیرید که قراره چه پیامی رو به مخاطبتون منتقل کنید؟ دوره ی اصول طراحی رو با اصل یکپارچگی شروع کردیم که مطمئن بشیم در هر بخش تمرکز روی انسجام کلیه‌ی قسمت های طراحی حفظ میشه. (با دید تصویر بزرگ یا Big Picture طراحی می‌کنیم)حکایت فیل و کوران مولانا مثالی خوب برای درک نکردن Big Picture !مثل یک طراح حرفه ای فکر کن!خبره شدن تو بحث یکپارچگی از همون اول میتونه یکم سخت و چالش برانگیز باشه چراکه ما معمولا بدون در نظر گرفتن چگونگی قرار گرفتن این جزئیات در تصویر بزرگ، مستقیماً به طراحی جزئیات می پردازیم. اگه شما از همون اول کار نتونید به تصویر بزرگ نگاه کنید (کلیت پروژه رو تو ذهنتون مجسم کنید)، احتمالا همه اون سخت کار کردن ها و تلاش هاتون منجر به یه طراحی ضعیف میشه!برای نشون دادن اینکه ما معمولا این مورد رو نادیده میگیریم، لیست خرید رو مثال میزنیم.مثال: لیست خریدایجاد لیست برای خرید مواد غذایی یک کار ساده است - شما غذاهایی که می خواید در طول هفته درست کنید مشخض میکنید سپس موارد لازم رو یادداشت می کنید که بخرید.این اولین قدم در «تجربه خرید موارد غذایی» است. برای بیشتر افراد این قدم بعضا حذف میشه. برای مثال لیست خرید مون یه چیزی شبیه عکس زیر میشه:لیست خریددر نگاه اول، متوجه چیز اشتباهی در این لیست نمیشید. دقیقا برای هدف مد نظرمون، خرید اقلام مورد نیاز، ساخته شده. با این حال، بیاید از دید طراحی بهش نگاه کنیم و و مسئله را مورد توجه قرار دهیم.اصول طراحیدر این لیست ساده اینطور به نظر میرسه که همه ی بخش های درست رو داره تا هم ارتباط خوبی با شما برقرار کنه و هم باعث بشه هرچی که لازم دارید رو از فروشگاه بخرید! در نهایت یه خرید راحت. حتی ما می تونیم تمام اصول طراحی رو در این لیست ساده ببینیم.تعادل — وزن بصری به شکل یکسانی در پایین صفحه توزیع شدهچیدمان — لیست به شکلی چیده شده که به راحتی بشه اسکنش کردتضاد — فونت بزرگ تر در سرتیتر انتخاب شدهتناسب — فونت کوچکتر برای هر کالافضای سفید — فضای بین و دور متنتکرار — سایز و رنگ هر کالاحرکت — چشم به شکل طبیعی از بالا به پایین حرکت میکنهتضاد — متن مشکی روی پس زمینه سفیداما در مورد یکپارچگی چی؟خب یکی می تونه بگه که این لیست طراحیش یکپارچه هست، چرا که تمام اصول طراحی رو رعایت کرده. و کل لیست هم اینو بهمون میرسونه که همه موارد لیست شده، موادغذایی هستن.با این حال، اگه ما بیایم رابطه بین هر کالا رو بررسی کنیم، ممکنه که به فکر فرو بریم و از خودمون بپرسیم، خیار و شیر چه چیز مشترکی باهم دارن؟! ?نگاهی نزدیک تریکپارچگی معیاری ست برای سنجش اینکه چقدر عملکرد هر یک از عناصر طراحی شما با هم خوب هست. بر اساس این تعریف میتونیم بگیم که یک طراحی میتونه بسیار یکپارچه، تقریبا یکپارچه باشه یا اینکه اصلا یکپارچگی نداشته باشه. لیست مواد غذایی ما الان تقریبا یکپارچه هست. کارمونو راه می ندازه، اما هنوز اون تاثیری که باید رو نداره!باوجود اینکه تمام اصول طراحی در لیست موادغذایی مون رعایت شدن، نتیجه نهایی یک طراحی ضعیفه چرا ما از اول تصویر بزرگ رو در نظر نگرفتیم. حالا بریم ببنیم که تصویر بزرگ چی هست؟تصویر بزرگقبل اینکه ما بزنیم بیرون برای خرید مواد غذایی مون، بهتر که قبلش وایسیم و از خودمون چند تا سوال بپرسیم:این لیست موارد غذایی چه نقشی رو در کل تجربه خرید من بازی میکنن؟دوست دارم در نهایت چجور تجربه ای از خریدم داشته باشم؟چطوری می تونم ارتباطی که این اطلاعات با من میسازن رو بهتر کنم؟با فکر کردن به این موارد گسترده تر، ما از شروع کار میتونیم به یکپارچگی برسیم. شما دیگه یک لیست ساده خرید رو طراحی نمی کنید، بلکه شما دارید تجربه خریدتون رو به شکل کلی بهبود میدین!نوع نگاه با در نظر گرفتن دید تضویر بزرگ متفاوت هستبا نگاه کردن به طرح از نقطه نظر تصویر بزرگ، شما میتونید چیدمان مغازه رو در نظر بگیرید، که بخش هایی که نیازه ببینید و بر اساس ترتیب چیدمان محصولات اون ها رو دسته بندی کنید. با این اطلاعات جدید، شما می تونید لیست خرید تون رو باز طراحی کنید که یه چیزی شبیه عکس زیر میشه:لیست خرید طراحی شده!در انتها نتیجه ای که به دست میاد حس بهتری از یکپارچگی و تجربه ی خرید رو القا میکنه. با گذاشتن یه کم وقت و انرژی بیشتر برای «طراحی» لیست خریدتون با این روش، شما در نهایت زمان و انرژی بیشتری رو برای خودتون صرفه جویی میکنید چرا که با بهره وری بالاتری خرید کرده و از مغازه خارج میشین.درست از همونجایی که شروع میکنید به در نظر گرفتن کلیت ماجرا و تصویر بزرگ، طراحی خوب شروع میشه!یکپارچگی در طراحی رابط کاربریدر مثال بالا ما به تسک ساده تهیه خرید از دید تصویر بزرگ نگاهی انداختیم. این رویکرد بهتره که برای طراحی رابط کاربری هم در نظر گرفته بشه.اگه شما یک محصول کاملا جدید رو میخواید از صفر طراحی کنید، از این دست سوالات رو از خودتون بپرسید:این محصول چه مشکلی رو حل میکنه؟من مشکل رو برای چه کاربری حل میکنم؟پیام کلی که تو ذهن مخاطبان این محصول می مونه چی هست؟چطوری من می تونم محصول رو به قسمت های کوچکتر بشکونم و سازماندهی شون کنم؟قبل از شروع طراحی مهمه که به این نوع سوالات جواب بدین.با این روش اطلاعات بیشتری جمع آوری میکنین، در نهایت خیلی آسون تر می تونید اونا رو سازماندهی کنید و به یک حس یکپارچگی برسید.راهنمای استایل برند (Brand Style Guide) رو ایجاد کنیدبرند شما شامل عناصر طراحی هست که باید جهت ثبات محصول ازش استفاده بشه. این عناصر شامل نام محصول، لوگو، مجموعه رنگ ها و تایپوگرافی هست. برندینگ همچنین شامل موارد نا محسوسی مثل، حالت Hover، صدا و تن نوشته هاتون، همون تجربه کاربر نوشتار یا یواکس رایتینگ (دوره رایگان بعدی مون?) — و جملاتی که اغلب تکرار میشن نیز میشه.یکی از راه های بسیار موثر که مطمئن بشید که شما به یکپارچگی میتونید برسید ساخت راهنمای استایل برند، هست. برای نمونه Shopify مثال خوبیه.راهنمای استایل برند به عنوان یک منبع برای رسیدن به یک ثبات دیداری و احساسی در تمام محصول عمل میکنه. این راهنما میتونه همه چیز رو شامل بشه از رنگ هایی که شما می تونید یا نمی تونید باهم استفاده کنید تا نحوه پیاده سازی دقیق وب سایت.یکپارچگی در ارتباطپیام کلی که می خواید در ذهن مخاطبانتون بمونه چیه؟ در ادامه سه نقش اصلی این پیغام رو براتون میگیم:بشه فهمید که دقیقا شما کی هستید؟چه مشکلی رو حل می کنید؟این مشکل رو می تونید برای چه کسانی حل کنید؟وب سایت Optimizely، این کار رو خیلی بهینه در صفحه اولش انجام داده. پیام کلی شون اینه:جواب پس داده. بهتر شده. اپتیمازلی پلفرم پیشتاز جهت آزمایش کردن، که به تیم های بازاریابی و محصول کمک میکنه تا تست، یادگیری و استقرار تجربه دیجیتالی موفق تری داشته باشن.همونجور که فصل های یک کتاب یک موضوع رو در کل کتاب دنبال میکنن، برای رسیدن به یکپارچگی در ارتباط با کاربر، همه چیز باید به حول پیام اصلی بچرخه. ر بخش از صفحه اول اپتیمازلی دقیقا با این شروط مطابقت دارن.تجربه دیجیتالی تون رو بهینه کنید و به بالاترین نرخ بازگشت سرمایه در SaaS برسیدیا یه جا دیگه میگه: فقط Optimizely هست که بهتون اجازه این رو میده که آزمایشی در هر دو تیم بازاریابی و محصول داشته باشید.و در جایی دیگه: به جمع 26تا از 100 کسب و کار برتر جهانی بپیوندید که مبنتی بر آزمایش های روزانه تصمیم های هوشمندانه تری رو میگیرن.تمام ارتباطات دیگر طراحی صفحه اول شون کمک می کنه که مفهوم اصلی رو تقویت بشه، و یک حس یکدستی و یکپارچگی در ذهن مخاطب شکل بگیره.به فراتر از محصول تون فکر کنیدطرزفکر تصویر بزرگ شما رو محدود به محصول خودتون نمیکنه. کاربران شما با انتظار خاصی وارد وب سایت یا اپ تون میشن. چطوری مطمئن بشید که محصول تون همراستا با انتظارات کاربران هست؟استانداردهای وب، قراردادها و روش های خوب به شما کمک میکنند که نتنها در داخل سایت خودتون به یکپارچگی برسید، بلکه باعث رسیدن بیرون از اون هم میشین. محصول شما یکی از چندین محصولی است که کاربر در طول روزش تجربه‌ش می کنه. با در نظر گرفتن چند نکته اضافی هنگام طراحی می تونید انتظارات اونا را برآورده کنید.محک زدن (Benchmark) یک راه عالیه برای فهم اینکه کاربران ممکنه چه نوع انتظاراتی از طراحی داشته باشن. شما می تونید این کار را با مقایسه وب سایت هایی که کاربران شما بازدید می کنند و بررسی الگوهای طراحی که استفاده کردن، انجام دهید.برای مثال، وقتی که دارید یک فروشگاه آنلاین که لوازم تخت و خواب می فروشه طراحی میکنید، بهتره که قبل از شروع طراحی نگاهی بندازید به نظرات و تجربه‌ی خرید مشتری ها در وبسایت رقباتون.بنچمارک رقبادر مثال بالا ، ما لیست محصولات از 5 فروشگاه عمده را داریم که لوازم تخت خواب رو می فروشند. چند نکته جالب وجود داره که می توانیم انجام شون بدیم:تصاویر محصول همیشه بالاتر از جزئیات محصول هستن.نمادهای قلب همیشه برای اضافه کردن محصولات به لیست مورد علاقه های شما استفاده می شن.اطلاعات مربوط به محصول همیشه شامل عنوان، رتبه بندی و قیمت محصول هست.گزینه های رنگ یا بافت اغلب در لیست محصولات موجود است.ارسال رایگان اغلب با اطلاعات مربوط به محصول می باشد.با استفاده از این نوع مشاهدات، می توانید انتظارات کاربر خود را پیش بینی کرده و حوالی اونا طراحی کنید. با فکر کردن درباره اینکه چگونه محصول شما در تصویر بزرگ اینترنت قرار می گیرد ، میتونید طراحی منسجم محصول و رعایت اصل یکپارچگی رو در مقیاس جهانی مدنظر قرار بدید.جمع بندییکپارچگی هدف نهایی طراحی رابط کاربری هست. برای رسیدن به یک حس یکپارچگی در سراسر طراحی تون شما نیاز دارید که بزرگ فکر کنید حتی قبل اینکه شروع کنید به طراحی عناصر صفحه تون. قبل از شروع طراحی جزئیات به سوالات در مقیاس بزرگ تر جواب بدین. تمرین این درس از دوره کمک تون میکنه که از ابتدا به شروع کنید که چطوری میشه به یک حس یک دستی برسیم.در درس های بعدی، ما می بنیم که چطور سایر اصول طراحی باهم جهت رسیدن به حس یکپارچگی در طراحی تون کمک تون میکنن.[2]پ. ن. 1: برای یادگیری بیشتر می‌تونید به لینک های زیر مراجعه کنید.https://www.invisionapp.com/design-defined/unity-principle-designhttps://vanseodesign.com/web-design/design-unity/پ. ن. 2: داستان مقدمه این پست و ادامه ش در کل برای رسوندن یک پیغام به شما بود و اون اینکه مفهوم یکپاچگی در طراحی چی هست؟ امیدوارم این مطلب هم یکپارچه بوده باشه، اینطور بود آیا؟ ?پ. ن. 3: از هم تیمی گرامیم که در تهیه و ترجمه این مقاله خیلی کمک کردن تشکر میکنم، تو ویرگول میتونید گلناز شهشهانی رو دنبال کنید!مثل همیشه خیلی خوشحال میشیم، که این مقاله رو لایک کنید، نظرات باارزشتون رو بهمون بگید و چن ثانیه وقت بزارید و این مطلبی که ساعت ها براش زحمت کشیده رو به اشتراک بزارید! ممنونم :) UX Unicorn Mohammad Sharifi Sat, 18 Jul 2020 23:43:39 +0430 https://virgool.io/ux-unicorn/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7%DB%8C-%D8%A8%D8%B5%D8%B1%DB%8C-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%AF%D8%B1-%D9%BE%D8%B1%D9%88%D8%B3%D9%87%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-ux-brx4inv5hpsn پروسه‌ی طراحی تجربه کاربر بر اساس متد تفکر طراحی در ۵ مرحله‌ی (درک مسئله، تعریف مسئله، ایده پردازی، اجرای ایده و اعتبارسنجی) انجام میشه. بعد از دونستن اینکه در هر بخش نیاز به چه داده هایی داریم میتونیم از طریق نقشه ی ذهنی این مسئله رو شفاف سازی کنیم.برای اینکه یه نقشه ی ذهنی جامع از مراحل طراحی تجربه براتون شفاف بشه پیشنهاد میکنم مقاله‌ی یک نقشه‌ی ذهنی(Mind Map) برای مراحل طراحی تجربه کاربر رو مطالعه کنین تا ذهنتون از پراکندگی خارج بشه.خب، حالا که متوجه شدیم در هر بخش از پروسه ی طراحی تجربه نیاز به چه خروجی هایی داریم، وقتش رسیده تا مهم ترین ابزارهای بصری سازی در پروسه‌ی طراحی رو با هم مرور کنیم و یاد بگیریم.بخاطر طولانی بودنش عذر میخوام، اما اگر صبوری کنین در نهایت میتونه توی خیلی از مراحل طراحی بهتون کمک کنه تا توی مسیر دیزاین گم نشین.بوم مدل کسب و کارهدف بوم مدل کسب و کار فرم دهی و پایه ریزی یک کسب و کار نوپاست که با یک قالب برای مستند کردن مدل کسب و کار با المان های توصیف کننده ی مربوط به ارزش پیشنهادی شرکت و نحوه‌ی اجرای اون رو توصیف میکنه و نحوه ی کسب درامد و سود کسب کار ما رو مشخص میکنه.بوم مدل کسب کار. تصویر از Wikipediaبوم تفکر طراحیبوم تفکر طراحی، ابزاریه که از طریق اون به مراحل تفکر طراحی با شروع از مردم (به چه کسی نیاز داریم تا بهبود ببخشیمش؟) تا محصول نهای مون (چه تفاوتی قراره ایجاد کنیم؟) میرسیم.بوم تفکر طراحی. عکس از designthinkingcanvasنقشه ی ذهنینقشه ی ذهنی یک نمودار سلسله مراتبی هست که روابط بین بخش های مختلف اطلاعات رو نشون میده. نقشه ی ذهنی یک روش کاملی برای تصویرسازی هرموضوعیه که مراحل و زیربخش های مختلفی داره.مثالی از نقشه ی ذهنی. عکس از NNGroupمطالعه بیشتر: https://virgool.io/ux-unicorn/%DB%8C%DA%A9-%D9%86%D9%82%D8%B4%D9%87%DB%8C-%D8%B0%D9%87%D9%86%DB%8Cmind-map-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%B1%D8%A7%D8%AD%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-dcsmx7lcmuek نقشه های مفهومی (Concept maps)نقشه های مفهومی نسخه ی پیچیده تر از نقشه های ذهنی هستن. نقشه ی مفهومی بر شناسایی روابط بین موضوعات تأکید میکنن. مثالی از نقشه ی مفهومی. عکس از NNGroup نقشه ی همدلی (Empathy map)نقشه ی همدلی یک تجسم مشترک قابل استفاده برای اون چیزی که از کاربران خاص میخوایم. نقشه همدلی به تیمهای محصول کمک می کند تا بینش عمیق تری از اهداف انگیزه های خودشون کسب کنن.بوم نقشه ی همدلی. عکس از Dave Grayامیدها و ترس ها (Hopes and fears)امیدها و ترس ها روشی مؤثر برای سنجش نگرش شرکت کننده ها در رابطه با محصول است. "امیدها" انتظارات تیمهای شما رو در مورد آنچه می توان محقق کرد ، آشکار می کنه. "ترس" شک و تردیدهاشون رو در مورد سرمایه گذاری برای همکاری با یکدیگر نشون می ده.امیدها و ترس ها عکس از IBMارزش پیشنهادی (Value proposition)جمله ای که جنبه های کلیدی محصول مون رو ترسیم میکنه اینه: "چه چیزی؟ برای چه کسی؟ چگونه استفاده خواهد شد؟". ارزش پیشنهادی به تیم کمک میکنه تا در رابطه با اون چیزی که محصول نهایی خواهد بود به اتفاق نظر برسن.ارزش پیشنهادی به طراحان یوایکس کمک میکنه تا تمرکز خودشون رو روی موارد مهم از طریق UXMag حفظ کنن. تجزیه و تحلیل SWOTتجزیه و تحلیل SWOT روشی برای ارزیابی نقاط قوت (S) ، ضعف ها (W) ، فرصت ها (O) و تهدیدات (T) برای یک محصول ، خدمات یا استراتژی است.packtpub عکس از SWOTگزارش تحلیل رقبا (Competitive-analysis report)تجزیه و تحلیل محصولات رقبا با ترسیم ویژگی های موجودش یک روش مقایسه محسوب میشه. این گزارش به شما کمک میکنه تا استاندارهای صنایع موجود رو درک کنین و فرصت های مربوط به نوآوری در یک منطقه ی خاص رو شناسایی کنین.گزارش تجزیه و تحلیل رقبا. عکس از yellowpencilنمودارهای Affinityنمودارهای افینیتی یک روشیه که به تیم محصول کمک میکنه تا از داده های بدست آمده شون از فاز تحقیق به خوبی استفاده کنن. وقتی شما یک نمودار افینیتی رو میسازین، ایده هاتون رو در گروه هایی با مضامین مشترک و روابط بین اون ها سازمان دهی میکنین. نمودارهای افینیتی بخصوص زمانی که با داده های مختلف مثل: فکت ها، تحقیقات قومیتی، ایده های مربوط به جلسات طوفان فکری، نظرات کاربران، نیازهای کاربر، بینش ها و مسائل مربوط به دیزاین، همراه باشن بسیار ارزشمند خواهند بود.قالب نمودار افینیتی توسط conceptdrawپرسونای کاربر (User persona)پرسوناهای کاربر شخصیت های داستانی ای هستن که تیم محصول براساس تحقیقاتشون از کاربران مختلف در رابطه با استفاده ی اون ها از محصول یا خدمت مورد نظر ایجاد میکنن.مثالی از پرسونای کاربر. عکس از xtensioنقشه های شناختی (Cognitive maps)نقشه ی شناختی یک نمایش بصری از مدل ذهنی پروسوناها (یا گروه ها) ر رابطه با یک فرآیند یا مفهوم معین است. نقشه های شناختی، قانون بصری مشخصی برای پیروی ندارن.مثالی از نقشه ی شناختی. عکس از NNGroupنقشه سفر کاربر (User journey map)نقشه ی سفر کاربر تجسم فرآیندیه که کاربر برای دستیابی به هدفی از اون عبور میکنه. در ابتدایی ترین شکل، نقشه ی سفر کاربر با یکسری اقدامات کاربر طی یک بازه ی زمانی شروع میشه. تمامی مراحل موجود در نقشه ی سفر کاربر در رابطه با تعامل با یک محصول واقعی نخواهد بود.قالب نقشه ی سفر کاربر. عکس از NNGroupاستوری برد (Storyboard)استوری برد ابزاریه که به تیم محصول کمک میکنه تا تجربه ی کاربر با یک محصول رو پیش بینی و کشف کنن. استوری برد شبیه به فیلمیه در مورد ارتباط کاربر با محصول شما. این ابزار به شما کمک میکنه تا چگونگی جریان کاربر در محصول تون رو در طول زمان درک کنین.مثالی از استوری برد: عکس از : Chelsea Hostetter, Austin Center for Designسایت مپ (Site Map)نقشه‌ سایت(Sitemap)، ابزاری کاربردی هم برای طراحان و هم غیر طراحانه که به شما کمک می‌کند تا مطالب اصلی و مورد نیاز خودتونو مرتب کنین و صفحات غیر ضروری رو از وبسایت خودتون حذف کنین.آموزش بیشتر: https://virgool.io/ux-unicorn/%D8%A7%D9%88%D9%84-sitemap-%D8%A8%D8%B9%D8%AF-design-%D8%AE%D8%A8-%DA%86%D8%B1%D8%A7-xtbpsun61o7w جریان کاربر (User flow)جریان کاربر یک نمایش تصویری از راه های زیادیه که زمان استفاده از اپ یا وبسایت میتونین ازش استفاده کنین. برای مثال، فلوچارت مربوط به سرویس تجارت الکترونیکی با ورود کاربر به محصول، مثلا ورود به صفحه ی هوم پیج شروع، و با یک اقدام نهایی مثل خرید یک محصول به پایان میرسه.مثالی از جریان کاربر. عکس از careerfoundryآموزش بیشتر: https://virgool.io/@amirtaqiabadi/user-flow-%DA%86%DB%8C%D8%B3%D8%AA-ztgwtkpnunih وایرفریم (Wire Frame)یک ابزار بصری سازی و یک راهنمای تصویریه که برای نشان دادن عناصر کاربردی وب سایت ها ، برنامه ها استفاده میشه. با استفاده از مسیر بین صفحات وایرفریم میتونین معماری اطلاعات سایت رو به طراحی بصری و قابل درک تبدیل کنین.آموزش بیشتر: https://virgool.io/ux-unicorn/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DB%8C%D8%B1%D9%81%D8%B1%DB%8C%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%BE-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-lgqpuvduc5uc وایر فلو (Wire-flows)وایر فلو ترکیبی از وایر فریم و یوزر فلو هست. هر زمان که بخوایم جریان های پیچیده ی یک محصول دیجیتال رو به نمایش بگذاریم، با قرار دادن مجموعه ای از وایر فریم ها و جریانات بین اون ها میتونیم به خروجی ای به نام وایر فلو برسیم. آموزش بیشتر: https://www.nngroup.com/articles/wireflows/# موکاپ (Mockup)موکاپ یک روش بصرص برای نمایش یک محصوله. تفاوت بین وایر فریم و موکاپ در اینه که وایرفریم ها بیشتر به نمایش ساختار محصول میپردازه اما موکاپ در واقع نشون میده که محصول ما چه شکلیه و چجوری بنظر میرسه.نمونه موکاپ اپلیکیشن غذای من در اینجاآموزش بیشتر: https://www.visual-paradigm.com/guide/ux-design/wireframe-vs-storyboard-vs-wireflow-vs-mockup-vs-prototyping/ خلاصه اینکه..سعی کردم تا مراحلی از پروسه ی طراحی تجربه کاربر رو با نشون دادن قالب های مشخص و در نظر گرفتن ترتیب انجامشون بهتون نشون بدم.مسلما این قالب ثابت نیست اما میتونه برای منظم کردن ذهنتون و اینکه چه مواردی رو در دیزاینتون در نظر بگیرید، بهتون کمک کنه.امیدوارم که براتون مفید بوده باشه.منابع و مطالعات بیشتر:https://uxplanet.org/essential-tools-for-user-research-bb2ff24e8963https://blog.usejournal.com/the-ux-designers-toolkit-26-methods-tutorials-and-free-templates-8dc3487111a3https://www.nngroup.com UX Unicorn Negin Alizadeh Sat, 27 Jun 2020 22:09:47 +0430 https://virgool.io/ux-unicorn/%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-error-states-ecrin81zkj98 در این مقاله می‌خواهیم بررسی کنیم که چگونه یک طراحی خوب می‌تواند از اشتباهات کاربر جلوگیری کند و هم چنین نحوه ایجاد پیام‌هایی کارآمد در هنگام رخ دادن خطا، در مواردی که خطاها مستقل از ورودی کاربر هستند را بررسی خواهیم کرد. یک پیام درست و خوش‌ساخت می‌تواند یک لحظه شکست را به یک لحظه‌ی لذت بخش تبدیل کند.حالت‌های خطابهترین پیغام خطا همان پیغامی است که، هرگز نشان داده نمی‌شود. همیشه بهتر است که در وهله اول با هدایت کاربران در جهت درست از صورت گرفتن خطا توسط آنها جلوگیری کنیم، اما اشتباه کردن کاربر امری اجتناب ناپذیر است.خطاها در برنامه‌ به دلایل مختلفی اتفاق می‌افتند، گاهی کاربران مرتکب اشتباه می‌شوند، گاهی اتفاق می‌افتد چون برنامه دچار مشکل می‌شود. علت این خطاها و چگونگی اداره آن‌ها، تاثیر بزرگی بر تجربه کاربر دارد. خطاهای بی مورد با پیام‌هایی بی‌فایده, می‌تواند کاربران را ناامید کند و منجر به ترک برنامه شود.هنگامی که خطاهایی رخ می‌دهند، کنترل کردن خطاها بوسیله یک طراحی خوب نه تنها به کاربران آموزش می‌دهد که چگونه اشتباه خود را اصلاح کنند و از برنامه همان طور که انتظار دارند استفاده کنند، بلکه از احساس عدم آگاهی کاربران نیز جلوگیری می‌کند.هنگامی که در برنامه اشتباهی رخ می‌دهد، صفحه‌ایی به کاربر نشان داده می‌شود که شامل پیامی است. درواقع حالت خطا، وضعیتی است که در آن کاربر چیزی به جز حالت مطلوب و روتینی که در برنامه به دنبال آن است دریافت می‌کند. از آنجا که خطاها می توانند به دلایل مختلفی رخ دهند ، این حالتها می تواند شامل مواردی همچون، اشتباه کاربر (مانند داده ورودی نامعتبر) و یا عدم توانایی یک برنامه برای اتصال به سرور یا حتی عدم توانایی پردازش درخواست کاربر باشد. نمونه صفحات حالت خطا ( متریال دیزاین )هر خطایی، صرف‌نظر از علت، به نقطه اصطکاک برای کاربران خود تبدیل می‌شود و آن‌ها را از حرکت رو به جلو در تجربه خود منع می‌کند. خوشبختانه طراحی خوب در کنترل خطا می‌تواند به کاهش اصطکاک کمک کند.پیش‌گیری بهتر از درمان است اگر طراح برنامه‌های موبایل هستید، باید با رایج‌ترین تعاملات میان کاربران با برنامه‌ها که می‌تواند منجر به وضعیت خطا (شرایط مستعد خطا) شوند آشنا باشید. به عنوان مثال, معمولاً دشوار است که یک فُرم را در اولین تلاش پر کنید, یا اگر دستگاهی در اتصال شبکه دچار مشکل شود، نمی‌تواند داده‌ها را به درستی هماهنگ کند. شما باید این موارد را در نظر بگیرید تا احتمال رخ دادن اشتباهات را به حداقل برسانید. به عبارت دیگر, بهتر است از ایجاد خطا در ابتدای کار با ارائه پیشنهادها، استفاده از محدودیت‌ها و انعطاف‌پذیر بودن برنامه جلوگیری کنید.به عنوان مثال، اگر افراد قرار است در برنامه شما رزرو هتل انجام دهند، چرا تاریخ‌های گذشته را در دسترس آنها قرار بدهیم که احتمال رخ دادن خطا را افزایش می‌دهد؟ اگر کاربران تاریخ‌هایی را که مربوط به گذشته هستند انتخاب کنند یک خطای بیهوده رخ داده است.همانطور که در مثال نشان داده شد، می‌توانید به سادگی از انتخاب‌گر تاریخی استفاده کنید که به کاربران اجازه می‌دهد فقط تاریخ امروز و روزهای آینده را انتخاب کنند. این روش به کاربران کمک می‌کند تا دامنه تاریخی مناسب را انتخاب کنند.انتخاب‌گر تاریخ در برنامه booking.comصفحه خطا در فرم‌‌هامتن یک فرم مانند یک مکالمه دو طرفه است، پس مانند هر مکالمه‌ایی باید یک ارتباط بین دو طرف، یعنی کاربر و برنامه شما اتفاق بیافتد. بررسی داده‌های ورودی فرم به معنای مکالمه با کاربران و راهنمایی آنها در مواقع دشوار خطا و عدم اطمینان است. وقتی درست انجام شود، می‌تواند یک تعامل مبهم را به یک تصویر روشن و تعاملی دوطرفه تبدیل کند.به طور کلی چهار عنصر مهم در بررسی داده‌های ورودی یک فرم وجود دارد که شامل:اطلاع رسانی در زمان مناسب در مورد خطاها (یا موفقیت‌ها)نمایش اطلاعات خروجی در مکان مناسب رنگ مناسب برای پیام‌ها ساختار نوشتاری مناسب و آشنا برای کاربراینکه کاربر در هنگام پرکردن فرم دچار اشتباه میشود و داده‌های غلط وارد میکند، امری طبیعی و اجتناب‌ناپذیر است. اما با توجه به این نکته که فرم‌ها از برنامه‌ها هرگز حذف نخواهد شد، وظیفه ما این است که شرایط مستعد خطا را به حداقل برسانیم. بنابراین مهم‌ترین سوال این است که "چگونه درصد اشتباه کاربران را کاهش دهیم؟ "فرآیند پُرکردن یک فرم در حالت عادی برای کاربران به اندازه کافی ناخوشایند است، حال اگر این فرآیند با خطاهایی همراه باشد که برای کاربر نامفهوم و حتی روشن نیست که چه اشتباهاتی را مرتکب شده و کجا این خطا رخ داده، باعث نا‌امیدی کاربر، ناتمام گذاشتن فرم و ترک برنامه میشود.در فرآیند پٌرکردن فرم باید فوراً به کاربران در مورد درستی پاسخی که ارائه داده‌اند اطلاع دهیم و درست یا نادرست بودن اطلاعات را به بعد از زدن دکمه ارسال موکول نکنیم. اصل اولیه یک فرم خوب این است که: " با کاربران صحبت کنید! بگویید چه شده! " و بلافاصله کاربران را از درستی داده‌های ارائه ‌شده مطلع سازید. این رویکرد به کاربران اجازه می‌دهد تا خطاها را تصحیح کنند بدون اینکه صبر کنند تا دکمه ارسال را فشار دهند. با این حال، از دادان پیام تا قبل از تمام شدن تایپ کاربر اجتناب کنید زیرا در اغلب موارد، شما نمی‌توانید تا زمانی که تایپ کاربر تمام نشده، تایید کنید که پاسخ ارائه شده درست است یا نه. در برخی موارد به‌محض اینکه کاربر شروع به ورود داده‌ها میکند با پیام خطا مواجه میشود که این کار اشتباه است.از طرف دیگر ، فرم‌هایی که پس از ورود داده‌ها صحت درستی آنها را بررسی می‌کنند، به موقع به کاربر اطلاع نمی‌دهند تا اشتباه خود را اصلاح کنند.اعتبارسنجی داده‌ها در فروشگاه اپل پس از ورود داده‌ها انجام می‌شود.مایکل کونجویک (Mihael Konjević) در مقاله خود “Inline validation in forms — designing the experience” استراتژی‌های مختلفی را برای بررسی درستی داده‌های وارد شده در فرم‌ها امتحان کرده است که نهایتاً یک استراتژی ترکیبی پیشنهاد می‌کند : پاداش اولیه، مجازات دیرهنگام .Hybrid — reward early, punish late — approachمکان مناسب برای نمایش پیام خطا وقتی سؤال می‌کنید چه مکانی را برای نمایش پیام‌ها مناست‌تر است، این قانون را دنبال کنید "همیشه پیام را در روند انجام کار قرار دهید". اگر می‌خواهید در مورد خطایی که در یک قسمت خاص رخ داده است به کاربر اطلاع دهید، آن را در کنار آن قسمت نشان دهید. بهترین حالت نمایش پیام در سمت راست تکست فیلد و اگر امکان آن وجود نداشت در زیر آن قرار دهید.بروز و نمایش خطا در لحظهانتخاب رنگ درست در طراحی بصریرنگ یکی از بهترین ابزارهایی است که هنگام طراحی در بررسی صحت داده‌ها در فرم‌ها استفاده می‌شود. اضافه کردن قرمز به پیغام‌های خطا، زرد برای پیام‌های هشدار و سبز برای پیام‌های موفق، این رنگ‌ها فوق‌العاده قدرتمند هستند.این یک جنبه مهم در یک طراحی بصری خوب است.متن خطا باید خوانا باشد، با یک رنگ مناسب و کنتراست مناسب بر روی پس‌زمینه آن.واضح بودن پیامدر حالت عادی، متن یک پیام خطا ممکن است به این صورت بیان شود، " ایمیل نامعتبر است " ، بدون اینکه به کاربر بگوید چرا نامعتبر است . ( آیا یک اشتباه تایپی است؟ آیا ایمیل قبلا ثبت شده ؟ ).تمام تفاوت‌ در دستورالعمل یا دستور‌العمل‌هایی است که کاربر با آن مواجه میشود . نباید منتظر این باشیم که کاربر حدس بزند، چرا این خطا به او داده شده و همچنین باعث سردرگمی و یا ناامیدی او شویم . در این مثال، با پیامی به کاربر اطلاع می‌دهیم که این ایمیل قبلاً ثبت شده و در حال استفاده است. سپس برخی از گزینه‌ها مانند ( ورود یا بازیابی رمز عبور ) را ارائه می دهیم.بسیار خوب، فرض می‌کنیم اشتباهی رخ داده است، وقت آن رسیده که خطایی را در صفحه نمایش دهید تا نشان دهد که چیزی اشتباه شده‌. به عنوان مثال، اجازه دهید زمانی را انتخاب کنیم که اتصال به اینترنت قطع است و کاربر فقط به صورت آنلاین میتواند از برنامه استفاده کند. در این لحظه شما باید به کاربر اطلاع دهید که چه اتفاقی در حال رخ دادن است و کاربر را برای انجام رفع مشکل راهنمایی کنید.متن پیغام خطایی که انتخاب می‌کنید بسیار مهم است. این پیام به عنوان نماینده‌‌ایی از برنامه‌ی شما دست کمک یه سوی کاربر دراز میکند، پس باید یکسری از قواعد را رعایت کنید. برای مثال، هرگز نباید یک پیغام را به زبان فنی و اصطلاحات تخصصی بیان کنید. پیام‌هایی که حاویه کدهای خطای داخل برنامه یا اختصاراتی نظیر " خطای نوع 500" رخ داده‌است، مرموز و ترسناک هستند و کاربر را گیج می‌کنند.این پیغام خطا توسط یک توسعه دهنده برای یک توسعه دهنده نوشته شد نه برای یک کاربر. همچنین پیام نباید آنقدر ساده و نا‌مفهوم باشد که هیچ اطلاعات مفیدی به کاربر ندهد. صفحه خطای Spotify فقط بیان می‌کند که " خطایی رخ داده ‌است" و هیچ راهنمایی سازنده‌ایی در مورد چگونگی رفع این مشکل ارائه نمی‌دهد . مثالی از یک پیغام خطای مبهم دیگر. این صفحه‌ی خطا در مثال زیر به کاربران همان مقدار اطلاعات قبلی را که می‌دانند می‌دهد. کاربران هیچ سرنخی ندارند که این پیغام چه معنایی دارد و چه کاری باید انجام دهند.پیغام باید خوانا و مفید باشد، شامل یک نسخه کوتاه، مودبانه و آموزنده باشد که به وضوح بیان می‌کند :چه اتفاقی افتاده و چرا.گام بعدی را مشخص می‌کند که کاربر چگونه باید خطا را برطرف کند.پیام توضیح می‌دهد مشکل چیست و کاربر چگونه آن را حل کند.استفاده از تصویرسازی و طنز در حالت‌های خطا تهدید را تبدیل به فرصت کنید. این فرصتی عالی است که در مواقع رخ دادن خطاهای مختلف با استفاده از تصاویر و گرافیک‌های جذاب و خلاقانه، هم هنر خود را به کاربر نشان دهید و هم به کاربر کمک کنید. افراد با اطلاعات بصری بیشتر از یک متن ساده ارتباط برقرار می‌کنند. اما شما می‌توانید فراتر بروید و تصاویری منحصر به فرد خلق کنید که مختص به برنامه شما باشد و البته با برنامه مطابقت داشته باشد. استفاده از یک تصویر جالب و طنز که کاربران را به حل این مشکل تشویق می‌کند.شوخی ادویه زندگی است . کمی شوخ‌طبعی هرگز به کسی آسیب نمیرساند و می‌تواند از تجربه بد رخ دادن خطا بکاهد .شما می‌توانید تعداد زیادی نمونه عالی از پیام‌های خطای خنده‌دار را در آدرس Littlebigdetails مشاهده کنید. با این حال در استفاده از این شوخی‌ها محتاط باشید. چک لیست کامل و جامع از صفحات خطاصفحات خطا باید شش مورد زیر را داشته باشند:پیام‌های خطا باید به ‌صورت آنی و در لحظه‌ی رخ دادن خطا به کاربر نمایش داده شوند و کاربر را از این امر مطلع کنند‌.همه اطلاعات ورودی کاربر را ایمن نگاه دارید. برنامه شما نباید با رخ دادن خطا، هر چیزی که توسط کاربر وارد شده یا بارگذاری شده را تخریب یا حذف کند.با زبان کاربر با آن صحبت کنید. به طور واضح بگویید که چه چیزی اشتباه است و احتمالا ًچرا. گام بعدی کاربر، برای رفع خطا را تعیین کنید.کاربران را شوکه یا گیج نکنید. ( پیام نباید مبهم و یا اغراق آمیز باشد ).کنترل برنامه را از کاربر نگیرید. ( اگر مشکل بحرانی نباشد، کاربر باید بتواند تا حد امکان با بقیه برنامه تعامل داشته باشد ).برای انسانی کردن مشکل از حس شوخ‌طبعی استفاده کنید.راه‌حلی برای اکثر خطاهای رایجهدف اصلی صفحه خطای ۴۰۴ این است که کاربر را در سریع‌ترین زمان ممکن به صفحه‌ مور نظر هدایت کند. در این صفحه باید چندین لینک اصلی و راهنمایی را که کاربر شما می‌تواند از بین آنها انتخاب کنند ارائه دهید. در این صفحه باید لینک یا دکمه بازگشت به صفحه اصلی را به عنوان اقدام اصلی در نظر بگیریم و همچنین می‌توانید لینکی را با عنوان " گزارش خطا " قرار دهید که با زدن آن به سرعت گزارش خرابی صفحه ارسال گردد. اما اطمینان حاصل کنید که اقدام اولیه ( لینک به صفحه Home ) وزن بصری قوی‌تری دارد. ورود به برنامه ممکن نیست!طراحی صفحات ورود به برنامه معمولا ً مینیمال است، که شامل یک فیلد برای نام کاربری و دیگری برای گذرواژه. اما همیشه استفاده از طراحی مینیمال و حداقلی به اندازه کافی ساده و رسا نیست. دلایل بسیاری وجود دارد که چرا یک کاربر ممکن است در صفحه ورود به سیستم گیرکند و دچار اشتباه شود. قاعده اصلی برای یک صفحه ورود به سیستم بسیار ساده است، کاربر را مجبور به حدس زدن نکنید.برنامه Mailchimp راه‌حل‌هایی را برای رایج‌ترین مشکلات ارائه می‌دهید. بیایید آنها را بررسی کنیم :کاربر نام کاربری خود را فراموش کرده‌ است. اگر شما تشخیص دهید که مشکل یک نام کاربری ثبت نشده است، باید یک لینک ارائه دهید تا اجازه دهد کاربر آن را اصلاح کند. به کاربران بگویید که در کجا و چگونه می‌توانند این اصلاح را انجام دهند. به طور مثال " ( ایمیل دریافتی از ما را چک کنید ) " یا لینکی برای بازیابی نام کاربری داشته باشید.کاربران چندین بار تلاش می‌کنند تا با استفاده از یک گذرواژه نادرست وارد سیستم شوند. برای جلوگیری از هک شدن، حساب‌های کاربری اغلب به طور موقت پس از تلاش‌های ناموفق برای ورود به سیستم قفل می‌شوند. این یک عمل امنیتی ضروری است، اما باید قبل از قفل شدن به کاربران هشدار دهید.عدم پذیرش اطلاعات کارت اعتباریخطاهای نمایش داده شده برای کارت‌های اعتباری را می‌توان ناشی از چندین علت دانست،که از جمله آنها می‌توانیم به اشتباهات تایپی، اطلاعات ناقص و یا منقضی اشاره کرد. گابریل تومسکو در مقاله خود "آناتومی فرم کارت اعتباری"، استراتژی زیر را برای حالت‌های مختلف خطا پیشنهاد کرده است:یکی از راه‌حل‌ها این است که باید صحت داده‌های ورودی را در لحظه بررسی کنید و خطای صورت گرفته را به صورت بصری نشان دهید.اما وقتی کارت بانکی به دلایلی از طرف شبکه پرداخت رد می شود، شما باید داده های وارد شده توسط کاربر را پاک کنید. اما بعد از آن، هنوز هم باید به کاربر بگویید که چه اتفاقی افتاده است. پیام خطا باید تا حد امکان واضح باشد.خطا در اتصال به شبکهدسترسی به اینترنت در همه جا امکان پذیر نیست، ولی امروزه پشتیبانی آفلاین برای تقریباً هر برنامه‌ایی ضروری است. وقتی اتصال به شبکه قطع است، باید سعی کنید یک تجربه آفلاین خوب و کاربردی ایجاد کنید. کاربران باید قادر باشند تا حد امکان با بقیه برنامه شما تعامل داشته باشند. این بدان معنی است که برنامه باید محتوای ذخیره شد‌ه‌ایی داشته باشد تا یک تجربه آفلاین خوب فراهم شود .دانیل ساوبل در مقاله خود توضیح کاملی درباره نحوه عملکرد برنامه‌های اجتماعی، نقشه برداری و بهره‌وری به صورت آفلاین ارائه می‌دهد. کاملاً مشخص است که چرا او پیشنهاد می‌کند که بهتر است کمی از همه موارد را ذخیره کنید. زیرا وقتی کاربران برنامه ای را باز می کنند، بدون توجه به اینکه به اینترنت متصل هستند، انتظار دارند محتوایی را ببینند. اگر موفق نشوند، ناامید می‌شوند و به برنامه‌ی دیگری روی می‌آوردن که کارکرد بهتری دارد و اطلاعاتی را که می خواهند ببینند را به آنها نمایش می‌دهد.اطمینان حاصل کنید که برنامه شما به صورت آفلاین کار کند. در اینجا چند توصیه عملی از رابرت وو را می‌بینیم که تقریباً در هر برنامه‌ایی که در بازار موجود است قابل استفاده می‌باشد. همیشه آخرین حالت در برنامه را ذخیره کنید. در زیر می توانید دو برنامه‌ی CNN و Cracked را مشاهده کنید. برنامه CNN با ذخیره کردن آخرین تصویر و ارائه عناوین برای مقاله‌هایی که آخرین بار، بارگذاری شده‌اند تجربه بهتری به کاربر ارائه می دهد.قابلیت‌ها و ویژگی‌ها در حالت آفلاین در هر برنامه، ویژگی‌هایی وجود دارند که می توانند بدون اتصال به اینترنت کار کنند. بیایید به برنامه Evernote به عنوان نمونه نگاهی بیاندازیم. برنامه‌ایی کاملاً آفلاین که شما می توانید یادداشت‌های موجود خود را ویرایش کرده و یا موارد جدیدی بنویسید و اضافه کنید، و هنگامی که دوباره به اینترنت وصل شوید، همه چیز در برنامه همگام سازی و بروز می‌شود.در پایاننتیجه‌ایی که در پایان مرور این مطالب می‌توان گرفت این است که، بهترین پیغام خطا، همان پیغامی است که هرگز نشان داده نمی‌شود. همیشه بهتر است که در وهله اول با هدایت کاربران در جهت درست از صورت گرفتن خطا توسط آنها جلوگیری کنیم. اما، در صورت بروز خطا، پیغام یا صفحه خطایی که به خوبی طراحی شده باشد نه تنها به کاربران می‌آموزد که چگونه از برنامه مورد نظر خود استفاده کنند، بلکه باعث می شود تا کاربران احساس عدم‌آگاهی و گیجی نکنند. البته، طراحی برای وضعیت‌های مختلف خطا، جزء مراحل محبوب نیست. با این حال، اگر زمان کافی را برای این حالت‌ها صرف کنید، تجربه کاربری محصول شما بی نهایت لذت بخش‌تر خواهد شد. خوشحال میشم اگر شما تجربه یا تحقیقی در این مورد دارید، به اشتراک بگذارید و کامنت کنید.اگر مطالب این مقاله براتون مفید بوده، پیشنهاد می‌کنم این مقاله رو هم مطالعه کنید :چک لیست طراحی Empty stateمنابع و مقالات مشابه :How To Design Error States For Mobile AppsInline validation in forms — designing the experience UX Unicorn صرافی تبدیل Sun, 21 Jun 2020 11:54:12 +0430 https://virgool.io/ux-unicorn/%D8%AF%D9%88%D8%B1%D9%87-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B5%D8%B1%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-%D9%85%D8%B1%D9%88%D8%B1-%DA%A9%D9%84%DB%8C-ll1bsqej5ule این پست، شروع یک سری مقالات مرتبط به هم هستن که در مورد آموزش طراحی بصری هست. یه دوره باکیفیت (سعی می‌کنیم) و رایگان، پس با به اشتراک گذاری و دادن نظر بهمون انرژی بدین که این راه رو باهم طی کنیم!قسمت اول: مرورکلیقسمت دوم: یکپارچگی قسمت چهارم: تعادلقسمت سوم: ترازقسمت پنجم: سلسه مراتبیقسمت ششم: تضادقسمت هفتم: نسبتقسمت هشتم: فضای منفیطراحی بصری درباره ساخت و ایجاد ثبات در زیبایی عمومی یک محصول است. برای ایجاد استایل زیبا در یک وبسایت یا اپ، ما با اصول عناصر طراحی دیداری، مثل چینش اونا طبق مبانی طراحی کار می‌کنیم. این عناصر و اصول با هم اجزای سازنده طراحی بصری رو تشکیل میدن. داشتن درک درستی از اونها در طراحی بصری هر محصولی حیاتی هستش.اینجا، ما عناصر طراحی رو معرفی میکنیم: خط، شکل، فضای منفی یا سفید، حجم، ارزش رنگ (color value)، (نوع) رنگ و بافت. درحالی که بررسی دقیق هر یک از این عناصر معمولا بخش مهمی از کارای روزمره طراح نیست، اصول طراحی ( منظور اینکه چطوری عناصر رو کنار هم بچینیم تا صفحات به شکلی بهینه بسازیم)، نقش حیاتی داره. یادگیری اینکه چطور به یکپارچگی، گشتالت، وجود سلسله مراتب، تعادل، کنتراست، مقیاس، چیرگی و سادگی برسیم، باعث کاهش دوباره کاری و اتلاف زمان میشه. همچنین نحوه ی استفاده از این عناصر کاربردی رو هم برای ایجاد بیشترین تاثیر یاد می گیرید.عناصر طراحی دیداریهر محصولی (از محصولات نرم افزاری مانند وبسایت و اپ ها گرفته تا محصولات سخت افزاری مثل دستگاه تستر و سشوار ) میتونن به عناصر پایه در طراحی دیداری تجزیه بشن، همون طور که آلان هاشیمتو پرفسور طراحی گرافیک و هنر کامپیوتری در دانشگاه یوتا و آقای مایک کلایتون مدیر و استاد هنرهای گرافیک کامپیوتری تو کتابشون، "مبانی طراحی دیداری با رویکرد دیجیتال". میگن: این عناصر ابزارهای پایه هستند که ما طراحان در کارهای روزمره مون ازشون استفاده میکنیم و داشتن درک خوبی از اونا، قطعا پیش نیاز این شغل هست.خطخطوط دو نقطه رو به هم وصل میکنن، و پایه ترین عنصر طراحی دیداری هستن. ما از اونا برای ساخت شکل ها استفاده میکنیم و با تکرار اونها، میتونیم الگویی رو شکل بدیم که بافتها رو بسازن.خطوط میتونن ساده باشن اما با استفاده از ویژگی های مختلف احساسات مختلفی رو برسوون خطها ویژگیهای متنوع زیادی دارن که بهمون اجازه میدن حالات زیادی رو منتقل کنیم. برای مثال، خطوط میتونن ضخیم یا باریک، مستقیم یا خمیده، پهنای یکسان یا متنوع و هندسی باشن. مثل اینکه با خط کش یا پرگار کشیده شده باشن یا ارگانیک باشن. مثل اینکه با دست کشیده شده باشن.همچنین خطوط می توانند بر این کاربرد نیز دلالت کنند: ایجاد یک ارتباط نامرئی بین سایر عناصر. به عنوان مثال در لوگو بنیاد طراحی تعامل ، کلمات «بنیاد طراحی تعامل» (Interaction Design Foundation یا IDF) اطراف درخت یه شکل دایره ی مانند رو رسم کرده.Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation.شکلاشکال، ناحیه های بسته‌ای هستند که معمولا توسط خطوط شکل میگیرند (علیرغم اینکه اونا ممکنه که رنگ و مقدار و بافت مختلف داشته باشن) یک شکل دو بعد داره، عرض و طول.ما می توانیم با استفاده از خطوط (مانند شکل بالا) یا با استفاده از تفاوت در رنگ ، بافت یا غلظت رنگ، اشکالی را ایجاد کنیم. ما آدما تمایل داریم که اشیا رو با شکل های پایه شون تشخیص بدیم، و برای درک بیشتر فقط روی جزئیات (مثل خطوط، مقادیر، رنگ ها و بافت ها) تمرکز کنیم. به همین دلیل، اشکال عناصری حیاتی هستند که ما طراحان برای برقراری ارتباط سریع و موثر ازشون استفاده می‌کنیم.فضای منفی / سفیدفضای منفی تحت عنوان فضای سفید نیز شناخته میشود، که به ناحیه خالی اطراف یک شکل مثبت گفته میشه. بین شکل و فضای اطرافش ارتباطی وجود دارد که با عنوان شکل و زمینه شناخته میشه. بهتره بدونیم که زمانی که داریم یک شکل مثبت رو طراحی می‌کنیم، درهمان حال داریم فضای منفی رو هم می‌سازیم. فضای منفی هم به اندازه فضای مثبت مهم هست برای اینکه بهمون کمک میکنه که مرز فضای مثبت رو تعریف کنیم و تعادل رو به ترکیب‌مون بیاریم.بعضی از طرح‌ها از فضای منفی برای ساخت جلوه های جذاب دیداری استفاده می‌کنن. برای مثال، لوگو World Wide Fund for Nature (WWF) از ترکیب فضای مثبت و منفی برای ایجاد تصویر پاندا استفاده کرده.طراح باهوش لوگو، با استفاده از ترکیب فضای منفی اطراف شکل مشکی، شکل پاندا رو کامل کرده.حجمحجم به اشکال سه بعدی گفته میشه که طول، عرض و ارتفاع دارن. ما به ندرت از حجم برای طراحی دیداری استفاده میکنیم، به دلیل اینکه بیشتر محصولات دیجیتال در فضای دو بعدی نمایشگرها دیده میشن با این حال بعضی از اپ ها و وب سایتها از مدل ها و گرافیک های سه بعدی استفاده میکنن. از لحاظ فنی عکس های سه بعدی که روی صفحه نمایش دو بعدی دیده میشن هنوز دو بعدی هستن.شبیه سازی شکل سه بعدی، در دو بعدارزش رنگیبه زبان ساده، تیرگی یا روشنی رو معین میکنه.ارزش رنگی Color Valueیک طرح با تضاد بالای میزان رنگ (به این معنی استفاده از مقادیر تیره و روشن) باعث وضوح بیشتر طرح میشه اما تو طرح دیگه ممکنه با تضاد رنگی کمتر اصلا احساس نشه و نامحسوس باشه. ما همچنین می تونیم از ارزش رنگی برای شبیه سازی حجم در فضای دو بعدی استفاده کنیم برای نمونه، با استفاده از رنگ های روشن تر که که رو شکل میفته و زوایاش رو مشخص میکنه و رنگ تیره هم رو زمین میفته و سایه ایجاد میکنه.تفاوت در میزان ارزش رنگی باعث تمیزی طراحی میشه (پررنگ و واضح)، در مقابل (کم‌رنگ و خفیف) نا محسوس به نظر میرسنرنگرنگ یک عنصر از نور هست. تئوری رنگ یک شاخه از طراحی است که برروی ترکیب و کاربرد رنگهای مختلف در طراحی و هنر متمرکز شده است. در تئوری رنگ، یک تفاوت واضحی بین رنگ هایی که افزایشی ترکیب میشن با رنگ هایی که کاهشی ترکیب میشن، وجود داره.در نقاشی ?، رنگ‌ها کاهشی ترکیب می شوند به دلیل اینکه نور توسط رنگ دانه ها جذب میشه، وقتی رنگ دانه های مختلف با همدیگه ترکیب می شن، نور بیشتری جذب میکنن، و رنگ نهایی تیره تر خواهد شد. از ترکیب کاهشی فیروزه ای Cyan، ارغوانی Magenta و زرد Yellow، رنگ مشکی blacK بدست میاد. ترکیب کاهشی در رنگهای نقاشی و چاپ، سیستم رنگی CMYK رو میدن بهمون.در طراحی دیجیتال، که محصول در یک صفحه نمایش نشان داده میشه، رنگ ها افزایشی ترکیب میشن، چون که نمایشگر ها نور رو ساطع میکنند و بطور طبیعی رنگ ها در هم اغام میشن، وقتی رنگ های مختلف باهم روی نمایشگر ترکیب میشن، رنگ روشن‌تری بدست میاد که نتیجه‌ش ساطع شدن بازه وسیع‌تر و روشن تر نور از صفحه ی نمایشه. یک ترکیب افزایشی از قرمز Red، سبز Green و آبی Blue و روی نمایشگر، رنگ سفید رو ایجاد میکنه. ترکیب افزایشی از رنگها روی صفحات دیجیتالی موجب ایجاد سیستم رنگی RGB میشه.سیستم رنگی RGB با ترکیب رنگی افزایشی، سیستم رنگی CMYK در چاپ با ترکیب رنگی کاهشیما از رنگها در طراحی بصری برای رسوندن احساسات و افزودن تنوع و جذابیت به طرح، تفکیک بخش های مختلف صفحه و متفاوت سازی کارمون از رقیبامون استفاده می‌کنیم.بافتبه کیفیت سطح یک شی بافت گفته میشه.به عنوان طراح، می‌تونید با دو نوع از بافت ها کار کنید: بافت ملموس، که می‌تونید بافت رو (با حس لامسه) احساسش کنید و ناملموس که فقط می‌تونید ببنیدش چون قابل احساس نیست. بیشتر طراحان دیداری از بافت نامحسوس استفاده میکنن، چون که نمایشگر ها نمی تونن بافت ها رو ملموس کنن!آیکنی که از بافت شیشه ای برای القای حس دکمه واقعی استفاده کرده. آیکن‌های طراحی شده iOS 6 و نسخه های قبلیش از بافت شیشه ای تقلید کردن که کاربر را به ضربه زدن ترغیب کنه. بعد اپل، طی حرکتی بافت لنین رو برای پس زمینه ی رابط کاربریش معرفی کرد. با معروف شدن طراحی تخت (فلت) (یه سبک طراحی مینیمالیستی (ساده‌گرایانه) که روی ساده بودن فضا و دو بعدی بودنش تاکید داره) استفاده از بافت در طراحی دیداری از اواسط سال 1390 خیلی کم تر شده هرچند که هنوزم میتونن خیلی مفید باشن.بافت linen شرکت اپل برای iOS و سایر پلتفرم های دیگه‌شاصول طراحیعناصر طراحی بصری (خط.، شکل، فضای منفی یا سفید، حجم، میزان رنگ، نوع رنگ و بافت) بلوکهای سازنده زیبایی محصول هستند. در مقابل، اصول طراحی بهمون میگن که چطور این عناصر رو برای رسیدن به بهترین نتایج کنارهم بزاریم. بطور کلی بعضی از این اصول به هم مرتبط و بعضی هاشونم مکمل همن.حالا چقدر این اصول طراحی برای شغل طراح دیداری مهم هستن؟ استاد پژوهش و توسعه در بنیاد مدیریت علوم موسسه William Lidwell، با استناد به کتاب اصول طراحی جهانی که میگه:“The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.” – William Lidwellبهترین طراحان بعضی وقتا اصول طراحی رو نادیده می‌گیرن. و زمانیکه این اتفاق میفته، مجبور میشن هزینه ی این سرپیچی رو بپردازن تا طرح به سرانجام خوبی برسه و اشتباهات جبران بشن. حتی اگر همچنان مطمئنید که به روش خودتون بهترین نتیجه رو میگیرید، بازم بهتره که این اصول رو گوشه ی ذهنتون نگه دارید. - ویلیام لیدولیکپارچگییکپارچگی یعنی ایجاد هارمونی بین تمام اجزاء موجود در صفحه. وقتی یک عناصر در یک صفحه به شکل دیداری یا مفهومی، مرتب چیده شده باشند حس یکپارچگی به بیننده القا میکند.استفاده از گرید باعث به وجود اومدن یکپارچی میشه.وقتی ما داریم وبسایت رو طراحی می‌کنیم، می تونیم از گرید (Grid) برای بوجود آوردن حس یکپارچگی استفاده کنیم. چون عناصری که در یک گرید سازماندهی شدن یک چینش مرتب رو دنبال می‌کنند. ما به گرید نیاز داریم تا بین یه طراحی خسته کننده و شلوغ پلوغ، تعادل برقرار بشه.گشتالتگشتالت به تمایل ما به درک مجموع بخش های یک چیز در مقابل درک هر بخش بصورت تکی، اشاره میکنه. چشم و مغز آدما تصویر یک جسم رو بصورت یکدست پردازش میکنه تا بصورت یک تصویر با جزئیات انفرادی و تکی. در بیشتر مواقع ما کلیت یک شی رو قبل از جزئیاتش درک می کنیم، ولی مثلا خط و بافت و عناصر دیگه شی قبل از درک کلی اون تو ذهن پردازش نمیشه!دلیل اینکه ما اشکال بالا رو مثلث، دایره و مربع می بینیم گشتالت هست، این در حالی هست که این اشکال چط چین هستند! ما ادما اول کلیت یه شی رو درک می کنیم بعد جزئیات.لوگو WWF ، که قبلتر دیدیم، یک مثال مثال از استفاده اصول گشتالت برای ساخت طراحی جذابه. با قرار دادن عناصر مختلف پاندا در کنار هم بصورت هوشمندانه، طراح از تمایل ما برای تصویر کردن یک پاندای یکدست و کامل استفاده کرده و به جای پردازش اجزا بصورت تک به تک، طرحی کامل از آن در مغز شکل می گیره.گشتالت یه اصل مهمه، برای نمونه، برای جداسازی قسمت های مختلف یک وبسایت با افزایش فضای سفید بین بخش های مختلف. به عنوان طراح، ما باید مطمئن بشیم که قسمت های مختلف وبسایت (برای مثال اگه اونایی که به یکی دیگه نزدیک باشن، و شکل یکسان و یا اندازه مشابه داشته باشن) که توسط اصول گشتالت باهم گروه شدن که حتما باهم باید شباهت مفهومی داشته باشن. گروه بندی تصادفی عناصری که از لحاظ مفهومی باهم مشابه نیستن باعث گیج شدن کاربرا میشه.طرح هایی با بخش بندی مشخص نسبت به مواردی که به شکل واضحی جداسازی نشده اند، ساده تر پردازش و اسکن میشن، به ویژه اگر این بخش ها از نظر مفهومی مجزا باشند.در ادامه دوره وارد جزئیات بیشتری میشیم.ساختار سلسله مراتبیساختار سلسله مراتبی، نشان دهنده ی تفاوت عناصر از نظر اهمیت و اولویت بندی آن هاست. رنگ و اندازه متداول ترین راه های ایجاد سلسله مراتب هستن (برای مثال با برجسته کردن دکمه اصلی، یا استفاده از فونت های بزرگتر برای سر برگ ها) در کل قراره که برای موارد بالای صفحه نسبت به موارد پایین صفحه اهمیت بیشتری از نظر سلسله مراتب بصری بدیم.از راه‌های رسیده به یک ساختار سلسله مراتبی، اندازه و استایل فونت است.تعادلتعادل از اصول بسیار مهمیه که نحوه توزیع یکسان عناصر طراحی رو مشخص می کنه. تعادل باعث میشه طرح آروم، پایدار و طبیعی بنظر برسه و درحالیکه طراحی نامتعادل حس گیجی و بدی به کاربر میده.شما چند نمونه از وب سایت یا اپی که عدم/تعادل رو به خوبی رعایت کردن می تونید بگید؟تعادل میتونه به کمک ایجاد تقارن تو طراحی برقرار بشه. برای نمونه، داشتن صفحه وب که متن و عکس هاش راست چین شدن. با این حال، شما همچنین میتونید تعادل رو بدون تقارن هم در طراحی ایجاد کنید که به عنوان تعادل نامتقارن نیز شناخته میشه. در تکنیک تعادل از نوع نامتقارن، از عناصر با سایزهای متفاوت به نحوی که منجر به یکپارچگی نهایی طراحیمون بشه استفاده میکنیم. یعنی یه نقطه در مرکز طراحی فرض می کنیم و عناصر رو حول اون به طوریکه به تعادل برسن، توزیع میکنیم.تضاد یا کنتراستما از تضاد برای اینکه یه عنصری بیشتر تو چشم بیاد استفاده می کنیم، که اینکار با دستکاری رنگ، ارزش رنگ، اندازه و سایر فاکتورهای دیگ انجام میشه. برای نمونه، به عنوان یک طراح (فرقی نمیکنه طراح لوگو هستیم یا رابطه کاربری و ...) ما اغلب از رنگ قرمز ? برای اینکه یک عنصر مشخص رو برجسته کنیم، استفاده میکنیم. در سیستم عامل آی او اس، رنگ قرمز در عملکرد حذف ظاهر میشه و بهمون هشدار میده این کاری که انجام میدی (غالبا) غیر قابل بازگشت هست. در مقابل رنگ سبز ? غالبا برای عملکرد مثبت (حداقل در فرهنگ غربی) مانند ادامه دادن و قبول کردن استفاده میشه. چیزی که قابل توجه هست اینه که وقتی ما میخوایم در طراحی مون تضاد ایجاد کنیم، نمی تونیم بیخیال معنی رنگ ها در فرهنگ های مختلف بشیم. اگه شما برای یه مشتری در کشور دیگه طراحی میکنید، در موردش یاد بگیرید و کارتون رو طوری تغییر بدین که از ترجیحات فرهنگی اونجا پیروی کنه. برای مثال، از خوتون بپرسید که - آیا رنگ قرمزتو این کشور به معنیه خوش شانسیه یا عصبانیت؟ یا رنگ مشکی به درد کسب و کار میخوره یا برای مرگ و عزا؟ رنگ قرمز، رنگی با تضاد بالا که به شکل وسیعی در آی او اس برای عملکرد حذف استفاده میشه مقیاسمقیاس در مورد اندازه های نسبی عناصر در یک طراحی هست. با استفاده از مقیاس برای بزرگ کردن یک عنصر نسبت به بقیه عناصر کنارش، شما می‌تونید اونو مهمتر جلوه بدید. با این کار نه تنها باعث میشه که یک عنصر خودشو نشون بده بلکه میتونید با مقیاس یک حس عمق رو هم ایجاد کنید (بدیهیه که چیزایی که به چشم آدم نزدیک ترن بزرگتر دیده میشن) مقیاس های اغراق شده در عکسها میتونه اون ها رو نمایشی و جذاب کنه.مقیاس می‌تونه باعث به وجود اومدن ساختار سلسله مراتبی یا دادن اهمیت به عناصر خاصی بشه.احاطه یا چیرگیچیرگی باعث بوجود اومدن تمرکز روی یک عنصر میشه. ما میتونیم از رنگ، شکل، تضاد، مقیاس و یا موقعیت برای رسیدن به چیرگی استفاده کنیم. برای نمونه، در بیشتر وبسایت ها یک عکس بزرگ hero image وجود داره، که از چیرگی استفاده شده تا نظر کاربر رو به شکل طبیعی جذب کنه.می‌تونیم از رنگ، شکل، تضاد، مقیاس و یا موقعیت برای رسیدن به احاطه یا چیرگی استفاده کنیمزمانی که روی طراحی بصری کار می‌کنیم، باید مطمئن بشیم که استفاده از چیرگی هنوزم لطمه ای به یکپارچگی و تعادل وبسایت نمیزنه در غیر اینصورت، باعث گیجی و تجربه ای ناخوشایند برای کاربران میشه.مثال هایی برای نشون دادن عناصر و اصول طراحیبا مدنظر داشتن عناصر و اصول طراحی بصری، ما چند وبسایت رو تحلیل میکنیم که ببنیم اونا چطور از این اصول استفاده کردن و باعث ایجاد یه طراحی خوب شدن.صفحه اول گوگلصفحه اول گوگل یکی از پربازدیدترین صفحات دنیاست. یکی از دلایل طراحی خوبش برمی‌گرده به سادگی صفحه، اما اینجا عامل های دیگه ای رو بررسی می‌کنیم که باعث شده این صفحه فوق العاده باشه:اصول طراحی بکار گرفته شده در صفحه اول گوگلچیرگی: لوگو بزرگ گوگل و باکس جستجو باعث شده به فضای صفحه چیره بشه، که موجب جذب تمرکز مخاطب به مرکز صفحه درست جایی که لوگو قرار گرفته، میشه.تضاد + رنگ: لوگوی گوگل از رنگ های اصلی براق استفاده کرده و اونا رو به خوبی باهم ترکیب کرده که باعث جذابیت بصری لوگو شده. خود لوگو هم که تضاد کافی رو با پس زمینه سفید داره، باعث شده از صفحه جدا بشه.شکل: باکس جستجو از شکل مستطیلی استفاده کرده تا فیلد سرچ قابل قابل فهم باشه و اونو خیلی کاربردی کرده.فضای منفی: ضفحه اول گوگل بیشترش از فضای منفی ساخته شده، که باعث شده که باکس جستجو — عملکرد اصلی صفحه (در مرکز توجه) باشه. فضای منفی همچنین به خوبی برای صفحه کار می‌کنه که درست به عنوان یک صفحه سفید کاغذ به نظر می‌رسه قبل اینکه کاربر عبارت جستجو شو وارد کنه.تعادل: صفحه تقریبا به صورت عمودی قرینه هست، که موجب یک حسی از تعادل شده نگاه کرده به کاربرا حس آرامش و لذت میده ☺.صفحه اول سایت کوارتزکوارتز یک شرکت خبری دیجیتالی هست که بر بستر موبایل فعالیت می‌کنه و دارای مخاطبین جهانی است که در سال 2012 توسط آتلانتیک مدیا، راه اندازی شده. این شرکت صفحه اصلی بولد و چشم گیری داره که یه جورایی ویترین اخبار برگزیده‌ش محسوب میشه. اینجا عناصر و اصول طراحی که گفتیم بررسی می‌کنیم که چطور کنار هم استفاده شدن:چیرگی: خبر اصلی سریعا چشممون رو می‌گیره چراکه فونتی بزرگ و ضخیم داره که باعث چیرگیش روی صفحه میشه.سلسله مراتب بصری: این صفحه از یک ساختار سلسله مراتب بصری واضحی برای رسوندن اهیمت عناصر مختلف استفاده کرده. خبر اصلی، با تیتر بزرگ و درشت، بالاترین سطح سلسله مراتب نسبت به سایر عناصر رو داره. برای خبر فرعی، که زیر خبر اصلی قرار داده شده، فونت کوچک تر و سلسله مراتب پایین تری نسبت به خبر اصلی در نظر گرفته شده.مقیاس و ارزش رنگ: صفحه اصلی وبسایت کوارتز با استفاده از مقیاس حرف کیو که ماسک خبر اصلی شده سریعا هویت وب سایت که اول کلمه کوارتز Quartz هست بهمون القا میکنه. با این حال، رنگ خاکستری کمرنگ حرف Q باعث شده که در پشت زمینه نامحسوس دیده بشه و بجاش تمرکز کلی بره به سمت تیتر خبر اصلی.فضای منفی: بیشتر فضای صفحه اصلی منفی هست که به محتوا اجازه میده خودشو نشون بده و بدرخشه. وقتی ماوس روی تیتر خبر اصلی میره، حرف کیو پس زمینه ناپدید میشه، و فضای منفی رو با عکس خبر اصلی پر میکنه. این مثال از اینکه چطور فضای منفی میتونه یه نقش بی نظیری رو در جذابیت وبسایت ایجاد کنه.یکپارچگی: کوارتز از یک سیستم گرید در وبسایتش ایجاد کرده که حس یکپارچگی بهمون دست میده. برای نمونه چهار خبر دارای فاصله های یکسان و پهنای برابری برخوردار هستن که باعث، ایجاد حس مرتبی و ساختارمند بودن وبسایت میشه.جمع بندیعناصر طراحی بصری، بلوک های اصلی ساخت یک محصول رو تشکیل میدن. با این که ما طراحان بصری نیازی به بررسی تک تک عناصر به شکلی دقیق در کار روزانه‌مون نداریم، اما اصول طراحی (اینکه چطوری عناصر رو کنار هم بزاریم که یک صفحات اپ رو بهینه بزنیم) نقش حیاتی تو کاری که انجام میدیم دارن. یاد بگیریم که چطور طرحی که میزنیم یکپارچگی، گشتالت، سلسله مراتب، تعادل، تضاد، مقیاس، برتری و تشابه داشته باشه، فوق العاده برای شمایی که طراحی بصری انجام میدید مهم هست.پس استفاده از این عناصر به ترتیب:Line - خطShape - شکلNegative space - فضای منفیVolume - حجمValue - ارزش رنگیColor - رنگTexture - بافتو در کنار هم بودن این اصول (که در ادامه دوره وارد جزئیات هر کدوم میشیم) :Unity - یکپارچگیGestalt - گشتالتHierarchy - ساختار سلسله مراتبیBalance - تعادلContrast - تضادScale - مقیاسDominance - چیرگیباعث میشه دائما نتایج پیروزمندانه خلق کنید.منبعتمرین 1: شما هم الان با توجه به مطالبی که گفته شد یک وبسایت یا اپی که طراحی شو دوس دارید مثل نمونه گفته شده بررسی کنید و کامنت بزارید. ( اگه دوست داشتید به ایمیل m.sh1391 در جیمیل ارسال کنید!)? نوبت شما‌ست!اگه هر جایی تو مقاله ابهام یا سوالی دارید خیلی خوشحال میشم نظرات شما دوستان گرامی رو داشته باشیم تا کیفیت مقالات رو بالاتر ببریم. با اشتراک گذاری مقاله هم ازمون حمایت کنید تا این نوشته به دست افراد بیشتری برسه. ساعت ها طول کشیده که چندین نفر زمان شون رو بزارن تا این مقاله آماده بشه شما هم چند ثانیه وقتتون رو بزارید و لینک این مقاله رو share کنید! پ. ن 1: جا داره از هم تیمی های گرامیم مریم کامرانفر و گلناز شهشهانی که زحمت ترجمه عکس‌ها و ویراستاری این مطلب رو کشیدن تشکر کنم.? UX Unicorn Mohammad Sharifi Fri, 19 Jun 2020 00:09:20 +0430 https://virgool.io/ux-unicorn/%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-empty-state-honacekz2ee1 هرآنچه در طراحی صفحات Empty state لازم است، بدانید!وظیفه اصلی یک طراح ایجاد حس رضایت و خشنودی در کاربران برنامه است. گاهی اوقات کار کردن بر روی صفحات اصلی برنامه و قسمت‌های مختلف پروژه باعث عدم توجه طراحان به اهمیت صفحات Empty state می‌شود. این موضوع می‌تواند باعث ایجاد مشکلات متعدد و حتی ترک برخی از کاربران از اپلیکیشن یا سایت شود. در این مقاله می‌خواهیم با علت اهمیت داشتن این صفحات و نحوه‌ی جذاب کردن آن، آشنا شویم.صفحه empty state چیست؟در واقع empty state یا zero-data state ها پیام‌هایی هستند که، کاربران زمانی‌که محتوایی جهت نمایش در صفحه وجود نداشته باشد، مشاهده می‌کنند.این صفحات روشی برای بهبود تجربه کاربری محصول شما هستند. طراحان UX فرصت‌های زیادی برای ایجاد یک تجربه‌ی جذاب و پرمعنی دارند اما متاسفانه بیشتر اوقات از اهمیت empty state غافل می‌شوند.اینکه بدانیم این صفحات از اولویت بالایی در پروسه طراحی UX برخوردارند، موضوع مهمی است. زیرا با وجودی‌که به ندرت رخ می‌دهند اما وقتی نمایش داده ‌شوند، باید رضایت کاربر را جلب نمایند. برای این‌کار باید مطمئن شوید در طراحی خود تمام نیازهای کاربر را مشاهده می‌کنید. توجه به این جزئیات نه تنها باعث حرفه‌ای تر شما می‌شود، بلکه باعث باقی‌ماندن شما در بازار رقابت و همچنین نمایش هویت بصری سازمانی شما می‌شود. البته باید توجه کنید که مهم‌ترین موضوع، ایجاد حس خوب در کاربرانی است که با این صفحات تعامل دارند.بررسی دقیق تر empty stateبرای اینکه بدانید یک empty state ایده‌آل شامل چه مواردی می‌شود، اول باید با عملکرد دقیق اپلیکیشن یا سایت خود آشنا باشید.گاهی empty state‌ها می‌توانند فرم‌های مختلفی به خود بگیرند و عملکردهای متفاوتی داشته‌باشند و اصولا برای علل متعددی طراحی می‌شوند. در اینجا ۴ مدل معمول empty state که اصولا رخ می‌دهد را آورده‌ایم:اولین استفاده کاربرزمانی اتفاق می‌افتد که هنوز اطلاعاتی جهت نمایش وجود ندارد و کاربر با یک محصول جدید کار می‌کند.نمونه ای از طراحی empty state جهت راهنمایی کاربر جدیدپاک کردن اطلاعات یک صفحهزمانی که کاربر عملی را به اتمام رسانده و یا محتوای یک صفحه را تماما پاک کند، در این مواقع یک صفحه خالی نمایش داده می‌شود.اطلاعات موجود در سطل زباله حذف شده است و این empty state نمایش داده می شود.خطاهااین مدل زمانی‌که مشکلی پیش می‌آید و یا مثلا اتصال به اینترنت از بین رفته است، رخ می‌دهد.خطای ۴۰۴ بدون نتیجه و اطلاعات زمانی‌که داده‌ای جهت نمایش وجود ندارد. مثلا جستجو بی‌نتیجه بوده و اطلاعاتی درباره‌ی آن موجود نیست.نحوه نمایش جستجوی بی‌نتیجه در اپلیکیشن پیادهپیدا نکردن مکان مورد نظر در اپلیکیشن اسنپخطا(Error) وقتی مشکلی در صفحه بوجود می‌آيد یا ارتباط با اینترنت قطع شود، کاربر باید صفحه‌ای ببیند که درباره‌ی آن موضوع اطلاع دهد. در این مواقع empty state نباید شامل جزئیات زیاد و گمراه‌کننده باشد و تنها یک توضیح کوتاه و مختصر کافی است تا به کاربر بگوید که در قدم بعدی باید چه عملی انجام دهد. اگر کاربر دسترسی به اینترنت نداشته باشد، می‌توانید یک بازی ساده و جذاب به صفحه‌ی خود اضافه کنید (مانند گروم کروم). بنابراین کاربر می‌تواند زمانی‌که در انتظار اتصال مجدد اینترنت است را، با یک روش سرگرم‌کننده سپری کند.بازی ساده گوگل کروم هنگام قطعی اینترنتمثال‌هایی از موقعیت‌های معمول empty state در برنامه‌هاصفحه دراپ باکس(dropBox) وقتی هنوز فایل یا فولدری ایجاد نشده‌است.نمایش نتیجه زمانی‌که تمام تسک‌های موجود در to-do list تکمیل شده‌است.نمایش خطا در slack وقتی از دستوری که پشتیبانی نمی‌شود، استفاده کرده‌ایم.وقتی برای اولین بار اکانتی در یک شبکه اجتماعی (مثلا faceBook) می‌سازیم و هنوز مخاطبی نداریم.جستجو در جیمیل (Gmail) و عدم نمایش نتیجهبهترین تمرین برای طراحی empty state اگر از شما خواسته شده تا یک صفحه empty state طراحی کنید، یک سری تمرین برای رسیدن به هدفتان وجود دارد:به کاربران خود بگویید چه کاری انجام دهند(Call to Action (CTAهمانطور که گفته شد، یک empty state خوب این فرصت را به ما می‌دهد که کاربر را برای تعامل با محصول تشویق کنیم. برای اینکار شما می‌توانید یک دکمه call to action در صفحه خود قرار دهید.دکمه Call to Action منطقی‌ترین عملی که کاربر می‌تواند در صفحه انجام دهد را نشان می‌دهد یعنی هنگامی طراحی دکمه باید بدانید بهترین عمل برای کاربر چیست. این دکمه لازم است باشد تا کاربر بتواند به راحتی از empty state وارد فضای دارای اطلاعات شود. دکمه ایجاد تیکت جدید در پشتیبانی علی بابا البته توجه کنید که نیازی نیست که در هر صفحه‌ی empty state لزوما این دکمه وجود داشته باشد زیرا گاهی یک تصویر مناسب به همراه توضیحات مختصر گویای همه چیز می‌باشد.عملکردهای مختلفی برای دکمه Call to Action وجود دارد:- کلیک کردن روی دکمه برای انجام یک عمل جدید- نوشتن فیدبک در یک بخش مخصوص - استفاده از آن برای آموزش کاربر و نمایش یک ویژگی مخصوص- فرستادن کاربر به صفحه helpبرای مثال به یک نمونه از شبکه اجتماعی زیر توجه کنید:دکمه call to action شبکه اجتماعی face bookیک لیست دوستان وجود دارد ولی درحال حاضر خالی است. یک call to action خوب از کاربر می‌خواهد که دوستان خود را پیدا کند و آنها را با برنامه پیوند می‌دهد.به empty state خود شخصیت اضافه کنید:این صفحات جایی هستند که شما می توانید کمی خلاقیت به خرج دهید و کمی خصوصیات خاص به برند خود اضافه کنید. البته توجه کنید شخصیت پردازی لزوما به معنی شوخ‌طبعی نیست! وقتی که می‌خواهید به محصول خود طنز اضافه کنید، باید خیلی محتاط باشید! مواردی که امروز بامزه و جالب به نظر می‌رسند ممکن است در آینده خسته‌کننده شوند.اگر می‌خواهید از تصویر و متن با هم استفاده کنید، توجه کنید که تعادل را در صفحه خود برقرار کنید.گاهی تصاویر به خوبی گویا هستند و تنها کافی است نوشته‌ای مرسوم و مستقیم به طراحی خود اضافه کرد.در تصویر زیر google به خوبی از این کار برآمده است:Googleمطابق با قواعد گوگل متریال دیزاین تصاویر استفاده شده باید:- دارای هارمونی مشخص و یکدستی باشند- با برند شما سازگار باشندهمچنین تگ لاین شما نیز باید:- پیغام مناسب و کمک کننده‌ای داشته باشد- با برند سازگار باشد- هدف صفحه را به خوبی برساندهر پیغام در empty state از دو بخش تشکیل شده است:ـ سربرگ یا headline که اطلاعات اصلی را می‌دهد-‌ متن یا body که اطلاعاتی را اضافه می‌کند.برای خوانایی بهتر، متن نباید از سایز عکس بزرگتر شود. همچنین باید کوتاه و دوستانه و گیرا باشد و برای جذب کردن بیشتر مخاطب از افعال در headline خود استفاده کنید.از empty state برای آموزش و راهنمایی کاربر استفاده کنید.شما می‌توانید از این صفحات برای راهنمایی کاربران جدید و هدایت آن ها در برنامه خود استفاده کنید و در واقع empty state‌ها نقش موثری در پروسه‌ی آموزش کاربر دارند.یک empty state خوب کلید اساسی در نگه داشتن کاربران است. به گفته برخی منابع پس از گذشت ۳ ماه، تنها ۴ درصد کاربران از برنامه استفاده می کنند. بنابراین طراحان Ux باید توجه بسیاری به نحوه‌ی راهنمایی کاربران داشته باشند.درواقع empty stateها باید شامل اطلاعاتی باشند که با خیلی از اوقات استفاده از دکمه‌های call to action نقش مهمی را ایفا می‌کنند.از محتواها‌ی آماده یا آغازکننده استفاده کنید:به پیشنهاد متریال دیزاین بهتر است که صفحات خالی خود را با محتواهای آغازکننده پر کنید. این کار باعث می‌شود که کاربر سریع‌تر بتواند از محصول استفاده کند. به عنوان مثال برنامه‌ی ورد (word) از نمونه‌های آماده (template) جهت دسترسی راحت‌تر کاربر استفاده می‌کند.اپلیکیشن‌های کتاب و یا موسیقی خیلی اوقات می‌توانند از این محتواها استفاده کنند و از آن نتیجه‌های خوبی بگیرند. در این برنامه با استفاده از کتاب‌های رایگانی که در دسترس قرار گرفته، می‌توان سایر بخش‌ها را نیز گردش کرد.مثالهای از طراحی empty stateطراحی خوبی که برای این صفحه(اولین بار که کاربر وارد برنامه می شود) به کار برده شده است. دکمه call_to_action که در اینجا Get started است به شما کمک می کند تا بدانید برای شروع چه کاری باید انجام دهید.(dropBox)یک مثال خوب برای طراحی empty state. زمانیکه جستجو نتیجه ای بر نمی گرداند.مثال از طراحی هایی که UX مناسبی برای empty state ندارند:اینجا یک طراحی empty state می بینید که فیدبک خوبی به کاربر می دهد اما این فرصت که به کاربر مسیری را نمایش دهد یا call_to_action داشته باشد را از دست داده است.در این طراحی ما تقریبا یک صفحه خالی می بینیم! این تصویر به تنهایی عالی است اما هیچ مسیر مشخصی را نمایش نمی دهد و یا هیچ عملکرد یا اطلاعات خاصی به کاربر نمی دهد.جمع بندیهیچوقت کاربر را تنها نگذارید!!! empty state شما باید یک پاسخ شفاف به این سوال بدهد که چرا کاربران آن را در صفحه خود می‌بینند و‌ در قدم بعدی باید چه کاری انجام دهند. یک empty state ایده‌آل به کاربر می‌گوید که هدف آن چیست و چرا کاربر آن را مشاهده می‌کند. همچنین روشی خوبی برای درگیری بیشتر کاربر با محصول است.منابعhttps://medium.com/@cadabrastudio/empty-states-design-best-practices-4ae6f72b654bhttps://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/https://www.toptal.com/designers/ux/empty-state-ux-design UX Unicorn رومینا محمدزمانی Sun, 14 Jun 2020 15:19:49 +0430 https://virgool.io/ux-unicorn/%DB%8C%DA%A9-%D9%86%D9%82%D8%B4%D9%87%DB%8C-%D8%B0%D9%87%D9%86%DB%8Cmind-map-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%B1%D8%A7%D8%AD%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-dcsmx7lcmuek پروسه ی طراحی تجربه ی کاربر از متدهای مختلفی استفاده میکنه و همه ی این متدها در راستای مراحل درک مسئله، تعریف مسئله، ایده پردازی، اجرا و اعتبارسنجی صورت میگیره.من همیشه دغدغه ی شفاف شدن زیربخش های مربوط به این موارد رو داشتم تا اینکه به یک نقشه‌ی ذهنی در رابطه با پروسه‌ی یوایکس رسیدم. این نقشه با توجه به ماهیت پروژه هاتون میتونه تغییر کنه و مواردی بهش اضافه یا کم بشه اما بلحاظ شفاف کردن پروسه‌ی طراحی تجربه کاربری میتونه چراغی راهی برای مسیر دیزاین تون باشه.خلاصه ای از تعریف نقشه ی ذهنی (Mind Map)نقشه ی ذهنی روشی برای ساختاربخشیدن و سازمان دادن افکار و دانش و اطلاعاتمون در زمینه‌ی مربوطه‌س. اگر طراحی تجربه ی کاربر رو یک درخت تصور کنیم، خرده موضوعات مرتبط با هر بخش از طراحی تجربه کاربر بعنوان شاخه های اون درخت درنظر گرفته میشه.تو این مقاله قراره چی یاد بگیریم؟اگر در رابطه با بکارگیری متدهای دیزاین متعجب هستین، و یا علاقمند به نقشه ی دانش مربوط به طراحی محصول/ تجربه کاربری هستید، این نقشه ی ذهن میتونه بهتون کمک کنه. ما نیاز به یک راهنمای روی کاغذ داریم که بهمون بگه "چه زمانی از چه چیزی استفاده کنیم". و یک تمرین نقشه ی ذهنی میتونه بهمون کمک کنه. این نقشه همچنین به کلیه روشهای مورد نیاز در طی فرآیند طراحی می پردازه. منبع ما "درک مسئله، تعریف مسئله، ایده پردازی، اجرای ایده و اعتبارسنجیه". متدهای مختلفی برای استفاده وجود داره، برای مثال متد لین یوکیس (Lean Ux) و تفکر طراحی (Design Thinking) استنفورد است. بعنوان یک طراح، نه تنها باید دانش کافی از تجریه کاربر داشته باشیم، بلکه باید در رابطه با کسب و کار، تکنولوژی، مهارت های ارتباطی هم اطلاعات لازم رو داشته باشیم.جزییات کلی مربوط به نقشه ی ذهنی در طراحی تجربه کاربر این نقشه بر اساس این کد گذاری ها دسته بندی شده که هر بخش رو مورد بررسی قرار میدیم:۱. درک مسئلهدر مرحله ی "درک" ما خودمون رو جای کاربرمون قرار میدیم و چیزهایی که دوست داره و دوست نداره، محتوا، نیازهاش، نقاط دردش و .. رو میبینیم و درک میکنیم. همچنین درمورد کسب و کار هم چیزایی یاد میگیریم: مدل درآمدزایی چیه؟ معیارهای سنجش موفقیت کسب و کار چیه؟ چالش ها چه چیزهایی هستن؟ چرخه ی محصولی که ما توش هستیم چیه؟بخش اول: درک مسئله۲. تعریف مسئلهدر فاز تعریف مسئله، بمنظور کشف مشکلات و فرصت ها، ما با تیم مربوطه، بخصوص مدیرمحصول همکاری میکنیم. توانایی جمع آوری بینش و ترکیب داده ها و ورودی انتزاعی برای تعریف مسئله بسیار مهمه.بخش دوم: تعریف مسئله۳. ایده پردازیما به ایده هایی می رسیم که برای کاربران و کسب و کار حالت برد-برد ایجاد میکنه. تیم رو در مرحله ایده پردازی جوری درگیر کنین تا همه بتونن با تخصص خودشون مشارکت داشته باشن. اطمینان حاصل کنین که ایده ها قابل برنامه ریزیه و در نهایت به محصول ختم میشه. همچنین درمورد چگونگی سنجش موفقیت هم فکر کنین.بخش سوم: ایده پردازی۴. اجرای ایدهفاز اجرایی در رابطه با ساختن و ارتباط برقرار کردنه. دانش تئوری پایه و اساسه، همدلی با کاربر بسیار ضررویه و گرفتن بازخورد از توسعه دهنده گان یا سایرین بهمون کمک میکنه تا موفق بشیم. سازمان دهی یک جلسه مشترک با توسعه دهندگان و ارائه ی یک جریان خوب با همه ی کیس های مربوطه و یک پروتوتایپ اولیه ی جالب توجه همیشه میتونه مفید باشه.بخش چهارم: اجرای ایده۵. اعتبارسنجیداستان های متفاوت دارای روش های متفاوتی برای اعتبارسنجی هستن. علاوه بر موارد پیش بینی شده باید به متریک ها یا بازخوردهای دیگه هم توجه کنین. همچنین، هرگز دنبال کردن مواردی مثل: "چه چیزی رو بهبود دادین؟ فرصت های جدیدتون چی هستن؟ آیا به اعتبارسنجی بیشتری نیاز دارید؟" رو فراموش نکنین.بخش پنجم: اعتبارسنجیخلاصه اینکه..بنا به نوع محصول و شرایط ویژه تون سعی کنین قبل از شروع پروسه ی دیزاین، یک نقشه ی ذهنی برای خودتون طراحی کنین. به این فکر کنین که "چه زمانی باید از چه چیزی استفاده کنین" و روز به روز نقشه خودتون رو توسعه بدین. این نقشه ی ذهنی به شما کمک می کنه چارچوبی رو برای نزدیک شدن به مشکلات و درک و حل شون ایجاد کنید.منابع و مقالات مشابهhttps://uxplanet.org/product-design-methods-mind-map-f6511820a7d5https://uxdesign.cc/mind-maps-ux-design-96a2d1333d7c UX Unicorn Negin Alizadeh Fri, 12 Jun 2020 20:47:54 +0430 https://virgool.io/ux-unicorn/%D8%A7%D9%88%D9%84-sitemap-%D8%A8%D8%B9%D8%AF-design-%D8%AE%D8%A8-%DA%86%D8%B1%D8%A7-xtbpsun61o7w طراحی وبسایت به‌خودی خود کار نسبتا مشکلی است که با اضافه شدن اطلاعات مختلف و سازمان‌دهی کردن آن‌ها، مشکل‌تر هم می‌شود. مطمئنا طراحان حرفه ای قبل از طراحی، وایرفریم و ماک آپ رسم می‌کنند؛ اما تکلیف آن‌هایی که طراح نیستند چیست؟ خود شما، قبل از محول‌کردن تمامی کارها به طراح، ساختار سایت خود را چطور درک می‌کنید؟نقشه‌ سایت(Sitemap)، ابزاری کاربردی هم برای طراحان و هم غیر طراحان است؛ که به شما کمک می‌کند تا مطالب اصلی و مورد نیاز خود را مرتب کنید و همچنین صفحات غیر ضروری را از وبسایت خود حذف نمایید. در ادامه، دقیق تر به بررسی این سوال می‌پردازیم: اول Sitemap، بعد Design! چرا؟!هدف وبسایت خود را واضح و روشن به مخاطب القا کنیدهر وبسایتی باید یک هدف مشخص داشته باشد؛ در غیر اینصورت غیرمتمرکز و به هم ریخته به نظر می‌رسد، جابه‌جایی(navigation) بین بخش‌های مختلف راحت نبوده و تجربه کاربری ضعیفی از سوی مخاطبان گزارش می‌شود. در اینگونه سایت‌ها، مخاطب متعجب و سردرگم شده و از خود می‌پرسد "من دقیقا اینجا چیکار می‌کنم؟" قطعا شما هم نمی‌خواهید که کاربر و بازدیدکننده‌ی وبسایتتان، در هنگام تعامل با محتوا یا جا‌به‌جایی بین بخش‌های مختلف، سردرگم شود.#نکته_مفید: بسیاری از شرکت‌ها به جای اینکه از ابتدا طراحی اصولی و مناسبی را برای تبلیغ و انتشار محتوای خود در پیش بگیرند، وبسایتی طراحی می‌کنند که بیشتر حکم کارت ویزیت دارد و تدریجا قسمت‌های مختلف آن را اصلاح می‌کنند؛ که این امر مستلزم صرف هزینه و زمان است و تجربه کاربری بد و ریزش مشتری‌ها را به همراه دارد. بهتر است قبل از اقدامی، یک قدم به عقب بروید و هدف وبسایت خود را تعیین کنید؛ که این امر به تنهایی باعث صرفه جویی در وقت، پول و منابع دیگر می‌شود. در ادامه چند راهکار عملی برای تعیین هدف مناسب وبسایت، معرفی می‌کنیم.از تولید محتوای تکراری، خودداری کنیدکپی کردن محتوای وبسایت‌های دیگر اتلاف وقت و منابع است. اگر مطالبی را از قبل روی وبسایتتان بارگذاری کرده‌اید، می‌توانید محتواهای جدید و مرتبط را به آن‌ها ارجاع دهید. اگر نقشه سایت ندارید، ممکن است متوجه تکراری بودن مطالب نشوید!؛ چرا که فقط صفحات جدید می سازید چون فکر می کنید باید ساخته شوند و ممکن است در این بین صفحاتی باشند که پیشتر ساخته شده‌اند و تشکیل دوباره ی آن‌ها کاری بیهوده است و شاید فقط نیازمند به روزرسانی مجدد باشند. با انتشار مطالب تکراری، محتوای متناقض منتشر می‌کنید؛ چرا که ممکن است مطلب ثانویه نسبت به اولین نسخه به روزتر باشد و این امر باعث ایجاد از هم گسیختگی مطالب می‌شود.#نکته_مفید: انتشار مطالب تکراری باعث می‌شود که موتور های جست‌‌وجو به صورت خودسرانه آن مطلبی که فکر می‌کنند مهم‌تر است را انتخاب کرده و به کاربر نشان می‌دهند. نباید اجازه دهید این اتفاق بیفتد!؛ چرا که ممکن است صفحه‌ی طراحی‌شده برای بالا بردن نرخ تبدیل را نادیده بگیرند و صفحه‌ای که اینکار را نمی‌کند، ایندکس کنند.در این مورد بیشتر بخوانید: اینجاقیف تبدیل(Conversion Funnel) را ساده کنیدشما باید مراحل رسیدن از مرحله ی A به B را به حداقل برسانید!؛ چرا که هرچقدر این مراحل طولانی و متعدد باشند، احتمال خروج مشتری بدون تکمیل خرید یا انجام ثبت نام هم بیشتر می‌شود. با استفاده از نقشه سایت، متوجه می‌شوید که مراحل اصلی مورد نیاز کدامند و چطور می‌توان تا حدامکان آن‌ها را باهم ترکیب کرد. استفاده از نمایش تصویری مانند Flow Chart هم می‌تواند باعث ساده‌تر شدن قیف تبدیل شود. در هر مرحله نقشه سایتتان را تست کنید، تا مطمئن شوید مراحل اضافی را حذف کرده‌اید.#نکته_مفید: نرخ تبدیل خود را رصد کنید. قبل از معرفی وبسایت به موتورهای جست‌وجو گر، نرم‌افزار تحلیل نرخ تبدیل را بر روی آن تنظیم کرده تا هر لحظه از میزان ثبت‌نام و خرید کاربر و مشتری‌ها مطلع شوید. بدیهی‌است که اگر بتوانید از روز اول منطبق با این تحلیل‌ها پیش بروید و تغییرات را به موقع اعمال‌کنید، درآمد شما روزبه‌روز افزایش خواهدیافت.تمام تمرکز تیم را به یک صفحه معطوف کنیددر پشت صحنه‌ی یک وبسایت، ممکن است یک طراح، یک مدیر پروژه، یک یا دو توسعه‌دهنده، یک تولید کننده‌ی محتوا یا کپی‌رایتر و یک نفر بازاریاب و فروشنده حضور داشته‌باشند. این تعداد در هر تیم بیشتر یا کمتر است. نقشه‌سایت به شما کمک می‌کند تا توجه و تمرکز همه‌ی اعضای تیم را روی یک صفحه نگه‌دارید. نقشه‌سایت باید در دسترس تمام اعضا باشد تا به کمک آن پروژه‌ی خود را جلو ببرند. یادتان باشد، نقشه سایت یک قرارداد ثابت نیست و باید در خلال جلو بردن پروژه، تغییرات لازم بر روی آن اعمال شوند. نقشه‌سایت به نوعی مرکز کنترل تیم شماست. در هرمرحله نسبت به آن موقعیت را بسنجید. کارهای انجام شده و مراحل پیش رو را کاملا مشخص کنید. در صورت لزوم، مراحل جدید اضافه یا مراحل قبلی را حذف کنید. #نکته_مفید: جمع‌آوری تمرکز کل تیم روی یک پروژه، جدا از بالابردن سرعت، باعث می‌شود که ارزشیابی، ارزش‌گذاری و تعیین اهداف دقیق‌تر و منطقی‌تر صورت پذیرند.نتیجه‌گیری: بدون داشتن نقشه‌سایت، ممکن‌است زمان زیادی را صرف ایجاد صفحات غیر ضروری یا پیچیده کنید. قبل از شروع طراحی، یک نشست یا جلسه با تیم خود ترتیب دهید و به موارد ضروری و غیرضروری و قابل حذف وبسایت بپردازید. به یاد داشته باشید، اضافه کردن یا از بین بردن چیزی در مراحل اولیه ارزان‌تر است(از نظر زمان و پول)!..در مقاله ی بعدی، نحوه ی ترسیم نقشه سایت رو باهم. بررسی خواهیم کرد :)از اینکه در این مقاله هم همراه من بودید، سپاسگزارم! نسخه ی اصلی رو می‌تونید در این لینک بخونید. خوشحال میشم موضوعات پیشنهادی، انتقادات و پیشنهاداتون راجع به مقاله رو تو قسمت کامنت ها بخونم. UX Unicorn گلناز شهشهانی Tue, 09 Jun 2020 19:15:08 +0430 https://virgool.io/ux-unicorn/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%85%D8%AD%D8%B5%D9%88%D9%84-%D8%B1%D9%82%D8%A7%D8%A8%D8%AA%DB%8C-%D8%A7%D8%B2-%D9%85%D9%86%D8%B8%D8%B1-%D9%81%DB%8C%DA%86%D8%B1-q2mplcnvc55u این مبحث برای کسانی که طراح محصول هستند، مدیر محصول هستند یا قصد دارند به سمت طراحی محصول بیان میتونه مفید باشه.من میخوام بحث رو با یک مثال شروع کنم…فرض کنید برای خرید خودرو بین دو گزینه هم سطح از نظر اقتصادی قرار گرفته اید، چه معیار هایی را برای مقایسه دو خودرو در نظر میگیرید؟چه معیارهایی باعث ترجیح دادن یک خودرو نسبت به خودروی هم سطح خود می شود؟ خودروهایی که وظیفه ی حمل و نقل را بعهده دارند و اگر فاقد این وظیفه و هدف باشند، به بازار معرفی نمی شوند… پس هر دو گزینه امکان حرکت کردن دارند.حتما برای پاسخ به این سوال از کلمه آپشن یا امکانات استفاده‌ می‌کنید و پس از اینکه ظاهر خودروی مورد نظر را با سلیقه خود انتخاب کردید به سراغ مهمترین معیار یعنی همان امکانات می‌روید.در این وضعیت به احتمال زیاد، شما چک لیستی از امکانات هر دو مورد تهیه خواهید کرد و آن ها را در معرض مقایسه قرار می دهید و در نهایت آن مورد را که به نیاز های شما جواب مثبت داده باشد و در عین حال با سلیقه ی شما هم سو باشد را انتخاب می کنید.می‌توان گفت مهم‌ترین معیار انتخاب بین چند محصول هم‌سطح همان امکانات و آپشن‌های آن محصول هستند.حال می‌خواهیم این مثال را در محصولات آنلاین بسط دهم:در فضای آنلاین نیز اکثر محصولات دارای رقبا و سرویس های مشابه هستند که کاربران با توجه به نیازهایشان و امکاناتی که آن محصول در اختیارشان قرار می دهد، یکی را انتخاب می کنند. همانطور که اکثرا اطلاع دارید این امکانات در محصول دیجیتال همان فیچر ها هستند.فیچرهایی که به محصول شما مزیت رقابتی و برتری نسبت به سایر سرویس های مشابه می دهد و دلایل انتخاب سرویس شما را از سمت کاربران شکل میدهند.بعنوان مثال، میتوانید صفحه ای از سرویس Basecamp رو مشاهده کنید، که در آن، فیچرهای سرویسش را به معرض مقایسه با سرویس های مختلف قرار داده است و در این امر اسکیل کمپانی های مختلف، تعداد نیرو و حتی اهداف اون بیزینس ها برایش اهمیتی ندارد، تنها چیزی که در اینجا نقش بازی میکند و اهمیت زیادی برای مقایسه و تصمیم گرفتن کاربر دارد، فیچرهای محصول هستند.منبع: basecamp.com/pricingمنبع: basecamp.com/before-and-after بنابراین:۱. فیچرها به محصول شما مزیت رقابتی و برتری نسبت به سایر محصولات مشابه می‌دهد و دلایل انتخاب محصول شما از سمت کاربران هستند.۲.“کاربران” و “نیازهای کاربران” بالاترین اولویت در شکل‌گیری یک فیچر (یا آپشن در حوزه‌های دیگر) را دارند. (که در ادامه به بررسی این دلیل این اولویت خواهم پرداخت)طبق مثالی که زده شد، موضوع بحثی که بدنبال آن هستیم مشخص شد، فیچر! که در پنج مورد زیر بدان می‌پردازم:۱. فیچر چیست؟۲.کانال‌های فیچر ریکوئست چه هستند؟۳. فیچرهای خوب از کجا می‌آیند؟۴.انواع فیچر ریکوئست‌ها کدامند؟۵.نحوه ایجاد یک فیچر به چه شکل است؟فیچر چیست؟فیچرها امکانات و ابزار اضافی محصول شما هستند که در راستای اهداف و چشم انداز محصول اضافه می شوند و به محصول شما پر و بال می‌دهند. مثل کرم شکلاتی روی بستنی قیفی. اگر بدرستی و براساس نیاز کاربران به محصول اضافه شوند، باعث رشد و تقویت محصول می شوند و اگر با نیاز آن ها سازگار نباشد، شما منابع زیادی از تیم و محصول خود را هدر داده اید!هشدارررررر!!!!!بر اساس این تعاریف باید توجه داشت، راه اندازی هر فیچر برتری و در بازار رقابتی به همراه نمی‌آورد.پس فیچرهای خوب از کجا می آیند؟برای پاسخ به این سوال باید با مفهوم فیچر ریکوئست(Feature Request) آشنا شویم، درواقع هر امکان یا فیچری که قرار است به محصول اضافه شود، از کانالی به تیم محصول پیشنهاد می‌شود درواقع این پیشنهاد همان فیچر ریکوئست است.هر کدام از این گروه‌ها به احتمال زیاد به شما پیشنهاد راه اندازی یک فیچر را در نقاط مختلف محصول می‌دهند:بخش فروش‌ و مارکتینگمدیران و سهام‌داران‌تیم توسعهتیم پشتیبانیاگرچه که ایده‌های این گروه‌ها (تیم فروش و مارکتینگ، مدیران و سهام‌داران و تیم توسعه) احتمالا با محصول و اهداف تجاری محصول منطبق است و حتی درک زیادی از مشتریان نیز دارند، اما با توجه به دو واژه "کاربران" و "نیاز کاربران" که در ابتدا گفتم، تیم توسعه، تیم فروش و مدیران و سهامداران، مشتریان شما نیستند! پس نیاز است تا ایده‌های آن‌ها را نیز توسط کاربران (مشتریان) به اعتبارسنجی گذاشته‌شود. نباید صرف اینکه این درخواست‌ها از کانال تیم توسعه و یا سهامداران آمده، آن را سریعا در مرحله اجرا قرار دهیم.همچنین نباید به درخواست یک کاربر، فیچری را خلق و اجرا کرد. شما باید کل بازار کاربرانتنان را ببینید! نه فقط به یک نفر یا به اقلیت کاربران گوش دهید! و اما بخش پشتیبانی محصول؛این بخش بطور مداوم با کاربران (مشتریان) در ارتباط مستقیم است این جا درست جایی است که بیشترین درخواست فیچر اتفاق می‌افتد، اکثر درخواست‌ها از سوی مشتریان کنونی محصول می‌آید که یا متوجه چیزی می‌شوند که محصول را بهبود می‌بخشد یا چیزی را می‌بینند که به آن نیاز جدی دارند! از این حیث تیم محصول درحد امکان باید اوقاتی را بطور مستقیم با کاربران (مشتریان) بگذراند.این نوع درخواست ها باید بررسی شوند تا اگر به مقدار کافی خوب هستند و با اهداف محصول هم سو هستند، آن ها را  در صف اجرا قرار داد. بنابراین فیچر ریکوئست هایی که از سمت کاربران می آید و با اهداف محصول هم سو هستند، بهترین فیچر ها جهت اجرا می باشند.هدف همیشه باید خلق فیچر‌هایی باشد که به نفع همه کاربران است، نه فقط یک کاربر خاص. شما باید کل بازار کاربران را در نظر بگیرید، اولویت خلق واجرا نباید با اقلیت کاربران یا صاحبان محصول یا مدیران مارکت باشد.پس فیچر ریکوءست هایی که از کانال کاربران می آیند، اولویت بالاتری نسبت به بقیه کانال های ورودی دارند. اما همیشه آنها درست نیستند! مشتریان همیشه نمیدانند چه چیزی برای آنها بهتر است. اما بازخوردهای آن ها می تواند ما را متوجه مشکلات اساسی کند که کاربر در محصول تجربه کرده است.بنابراین،‌به این نکات در مورد فیچر ریکوئست‌های بخش پشتیبانی می توان اشاره کرد:تیم محصول درحد امکان باید اوقاتی را بطور مستقیم با کاربران (مشتریان) بگذراند.این نوع درخواست‌ها باید بررسی شوند اگر با اهداف محصول هم سو باشند، باید آن‌ها را در صف اجرا قرار داد.هدف همیشه باید خلق امکان و فیچری‌هایی باشد که از سمت عموم کاربران می‌آید نه فقط یک کاربر خاص.شما باید کل بازار کاربران را در نظر بگیرید، اولویت خلق واجرا نباید با اقلیت کاربران یا صاحبان محصول یا مدیران مارکت باشد.تمرکز روی نیازهای کاربران به معنای حفاظت از محصول و نگهداری کاربران است.قبل از اینکه به درخواست فیچری پاسخ دهید، در اولین سطح، از خود بپرسید:۱.آیا این امکان محصول را به چشم‌انداز و اهداف اصلی بیزینسی خود نزدیک می‌کند؟۲. آیا کاربران با دیدن این امکان احساس خوشایندی دارند؟ ۳. آیا این امکان به محصول شما ارزش و بهایی می‌دهد؟یا اینکه صرفا این یک ایده "جالب" است.فیچرها را برای دلایل مختلف انتخاب کنید، نه صرفا بدلیل جالب بودن.باید توجه داشت که همه درخواست‌ها یکسان نیستند، بنابراین مهم است که بین آن‌ها تفاوت قائل شویم تا بتوانیم راحت تر آن‌ها را مدیریت کنیم، پس:انواع درخواست های فیچر را بشناسیم!گزارش مشکلات:هنگامی که کاربر یا تیم‌محصول، تیم توسعه، پشتیبانی و... متوجه می‌شود چیزی در محصول شما بدرستی کار نمی‌کند.بهبود فیچر:پیشنهادهایی برای فیچری که می‌تواند کمی بهتر شود. فیچرهای جدید:ایده‌هایی برای اضافه کردن فیچرهای جدید که می‌تواند به محصول اضافه شود.این نوع درخواست است که از ابتدا حول آن صحبت کرده ایم. برای رسیدگی و راه‌اندازی فیچر جدید باید به چند اصل توجه داشت که در این بخش به آن‌ها می‌پردازیم:چند اصل برای راه‌اندازی فیچر جدید:۱.هزینه پیچیدگی محصول !با هر ابزار و فیچری که به محصول اضافه می‌کنیم، سطح پیچیدگی آن را به واسطه تغییرات ظاهری (UI)، گزینه‌های جدید روی دشبورد محصول، یک یا دو صفحه جدید و… بالا می‌برید، همه این موارد نباید عملکرد اصلی محصولتان را مختل کنند.فیچرها نه رایگان ایجاد و نه رایگان نگهداری می‌شوند! بنابراین علاوه بر اینکه باید کانال‌های ورودی درخواست فیچر، ارزشمندی، نیاز کاربران را بررسی می‌کنید باید به هزینه اجرا و نگهداری نیز باید دقت کرد.۲.اولویت‌بندی و توازن!علاوه بر در نظر گرفتن هزینه‌های مربوط به اجرا فیچر جدید، الزامیست که مطمئن شوید اولویت‌های خود را هنگام تصمیم‌گیری برای اضافه کردن و یا عدم اضافه کردن آن فیچر بدرستی چیده‌اید!اگر محصول شما غرق در انجام کارهای فنی، رفع مشکلات مختلف و بروزرسانی‌های زیرساختی است، زمان مناسبی برای ساختن فیچر جدید و جذاب نیست زیرا حفظ نقشه راه سالم محصول است که توازن و نگهداری محصول را حفظ می‌کند.۳.فیچرهای بدرد نخور ایجاد نکنید!زمانی که فیچرهای زیادی به محصول خود اضافه می‌کنید، کاربرانتان را حین کارکردن با محصول، در معرض خستگی و کلافگی قرار می‌دهید، از این رو برای ایجاد و برنامه ریزی یک فیچر حتما نیاز است تا با احتیاط زیاد قدم بردارید و درمورد اینکه چه بازخوردهایی بعد از راه اندازی این فیچر دریافت خواهید کرد فکر کنید!کلام آخر!با توجه به بررسی‌ درخواست‌های فیچر باید گفت، یک مدیر محصول و طراح محصول خوب، نه تنها با کلمه "نه" راحت است، بلکه آماده است تا با کلمه "چرا" به شیوه‌ای مناسب فیچر ریکوئست را پیگیری کند. در واقع این پیگیری به معنای استخراج برخی اطلاعات برای بررسی اهمیت آن فیچر برای محصول است و تا حد امکان از ایجاد فیچر های بدرد نخور جلوگیری کند.در اینجا، بخش اول این مقاله به پایان رسید، و نکته ای که در این زمان نیاز است که بدانیم، این است که خیلی از مدیران محصول در چرخه توسعه محصول، اولویت را با ایجاد و راه اندازی فیچر محصول می گذارند که درواقع این دیدگاه اشتباه است، چرا که راه اندازی یک فیچر فقط آغاز فرآیند است…آغاز فرآیندی که درموردش در ادامه توضیح خواهم داد...این مقاله آمیخته از تجریبات و اطلاعات شخصی به همراه استخراج مطالب از uservoice.com و craft.io و ... می‌باشد. UX Unicorn علی کاظمی Fri, 05 Jun 2020 12:01:02 +0430 https://virgool.io/ux-unicorn/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%D9%88-%D8%AA%D8%B9%D8%A7%D9%85%D9%84-%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%DA%AF%DB%8C%D9%85%DB%8C%D9%81%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-vdssnqyraa1h ایجاد تعامل با یک محصول کار راحتی نیست. بازگشت دوباره و دوباره ی کاربرها به محصول تون نیاز به چیزی داره که بتونه اون ها رو به محصول تون متصل کنه. یکی از راه های انجام این کار استفاده از المان های گیمیفیکیشنه. سطح گیمیفیکشن بستگی به نوع کاربر و حسی که قراره محصول تون انتقال بده داره. بعلاوه اینکه بعضی از المان های گیمیفیکیشن در محصول تون میتونه به کاربر کمک کنه تا تجربه ی مثبتی رو داشته باشه.مزایای گیمیفیکیشن چیه؟+ یک حس پیشرفت، هدفمندی، نشان های برنده شدن و بدست آوردن امتیازات روبهش میده و باعث بهبود انگیزه ی کاربر در یک مسیر شفاف میشه.+ میتونه باعث ایجاد رقابت در کاربران موقع یادگیری همزمان با دوستانشون بشه. این کار باعث افزایش بهره وری، خلاقیت و تمرکز در حل چالش ها میشه.+ خیلی سرگرم کننده تر از نگرش منظم و گام به گام و خشکه. اگه همزمان با یادگیری چیزی اونو تجربه ش کنیم، شانس بیشتری وجود داره که مدت زمان بیشتری اون رو در خاطر داشته باشیم."با میل و رغبت هرکاری رو انجام بدین چون عمیقا براتون چالش برانگیز و رضایت بخشه و باعث القای خلاقیتتون در علوم، هنر یا کسب و کار میشه."چگونه از گیمیفیکیشن استفاده کنیم؟بیایید برای مثال اپلیکیشن Duolingo رو در نظر بگیریم. استفاده از گیمیفیکیشن در محصولات آموزش آنلاین یک روش فوق العاده برای افزایش درگیری کاربرانه. در اینجا روش هایی رو برای چگونگی بکارگیری گیمیفیکیشن برای بهبود تجربه کاربری ارائه میدیم: هدف تون رو تعیین کنینارزیابی لازم رو انجام بدیدپیشرفت کاربر رو نمایش بدینیک برنامه ی وفادار داشته باشین اجازه ی دعوت از دوستان رو بدین خطاها رو با روش های درست مدیریت کنین۱. هدف تون رو تعیین کنینبرای افزایش درگیری مشتری با محصولاتتون، هدف مشخصی رو تعیین کنین و اجازه بدید کاربران تون اهداف خودشون رو داشته باشن." اهدافی که افراد برای خودشون تعیین میکنن و تمام تلاششون رو برای رسیدن به اون انجام میدن معمولا اهداف قابل قبول و درستی هستن."اپلیکیشن Duolingo نشون میده که کاربر چند روزی متوالی از برنامه استفاده کرده، و پیشنهاداتی رو برای تعیین اهداف روزانه بهش ارایه میده. اگه کاربر برای رسیدن به هدفش نیاز به زمان داشته باشه، این مهمه که بهش یاداوری کنین که برای چی اون کار رو انجام میده.در صفحات بارگیری Duolingo قبل از هرچیزی ارزش استفاده از محصول برای کاربر نمایش داده میشه که این امر باعث افزایش اشتیاق کاربر به ادامه و یادگیری میشه.زمان بارگیری یک تسک، مثل Duolingo ارزش محصول تون رو به کاربر نشون بدین.۲. ارزیابی لازم رو انجام بدینبازخوردهای مثبتی رو برای کارهای بزرگ و سخت به کاربر ارائه بدین. منتظر پایان چالشی نباشید که بخوان ازتون تعریف کنن و کاربرانتون رو با موفقیت هاشون حین استفاده از محصول تون، بشناسین.پیام ها و طراحی تون رو بشکل مثبت ارائه بدین و همیشه نیمه پر لیوان رو نگاه کنین.۴ نوع ارزیابی وجود داره:چالشی که خیلی سخت بنظر میرسه: وقتی یک تسک خیلی پیچیده س، در پایان بخش های خیلی سخت ش رو تکرار کنین. اسکرین اول در شکل زیر با پیام "تسلیم نشو" یه راه خیلی خوب برای ایجاد انگیزه در کاربر برای ادامه دادن اون چالشه.تحسین کردن مداوم: وقتی یک مرحله خیلی طولانیه، گفتن جمله ای به کاربر که بهش بگه چرا باید ادامه بده میتونه بهش کمک کنه. اسکرین دوم در شکل زیربا یک پیام متنی "ادامه بده! تمرین رو کامل کن" میتونه مثال خیلی خوب باشه.کار سخت: وقتی بنظر میاد که پیشرفت کاربر با سرعت و کیفیت بالاییه، اینجا بهترین جا برای متوقف کردن کاربر و نیرو دادن بهشه. سومین اسکرین در شکل زیر باخورد مثبتی رو که برنامه بمنظور پیشرفت کاربر تحت عنوان یه پیام مثبته نشون میده.چالشی که خیلی آسون بنظر میاد: اینجا بهترین زمان یرای شفاف ساختن این مساله س که به کاربر نشون بدیم این چالش خیلی راحتی براش بوده. اگر کاربر حس کنه اون چالش آسونی بوده و اپلیکیشن هم این مساله رو با یک پیام بهش نشون بده ، کاربر احساس همدلی بیشتری با اپلیکیشن برقرار میکنه. اسکرین چهارم در شکل زیر مثال خیلی خوبیه. ۴نمونه ارزیابی از اپلیکیشن Duolingoارزیابی میتونه برای هر تسک کوچیکی هم باشه. دراینصورت پیام متنی کوتاهه و در تعامل با کاربر بهش نشون داده میشه.ارزیابی های جزئی بعد از هر تسک کوچیک در برنامه Duolingo۳. پیشرفت کاربر رو نمایش بدیدکاربر میتونه خودش هدف ش رو تعیین کنه و یا سیستم این کا رو براش انجام بده. نشون دادن مراحل پیشرفت خیلی مهمه و باعث افزایش انگیزه ی کاربر برای تسک مورد نظرش میشه.پیشرفت کاربر از چندین راه میتونه شناسایی بشه:پیشرفت تسک: هر تسک کوچک هدف خاص خودشو داره، کاربران احتمالا نوار پیشرفت رو برای نشون دادن مراحل تسک مشاهده میکنن.دستاوردها: این یک پیشرفتیه که کاربران برای رسیدن به یک پاداش خاص، با انجام چندین تسک به پایان میرسونتش. برای مثال ، کسب تعداد مشخصی امتیاز برای بدست آوردن یک نشان.مراحل پیشرفت: برای اتمام یک مرحله یاید چندین تسک رو به پایان برسونین. کاربران، سطح بالایی از پیشرفت شون رو در رسیدن به هدف اصلی شون میبینن.نوار پیشرفت در بالای صفحه ی هر تسک ظاهر میشهبرای جذابیت بیشتر نوار پیشرفت کاربر توصیه میشه دستاوردهای کوچیکی از پیشرفت ش رو بهش نشون بدیم. در شکل زیر میبینین که Duolingo یاداوری میکنه که چند تسک متوالی بصورت کامل انجام شدن. همچنین نمادی از هر عدد با رنگ های مختلف وجود داره، شروع با سبز، سپس زرد و نارنجی. این کار میتونه حس تمایل به تمام کردن یک تسک رو بصورت کامل و بدون خطا به کاربر بده.نوار پیشرفت Duolingoتجلیل از پیشرفت کاربر مهمه و یکی از راه های انجام این کار تنظیم بعضی از دستاوردهاییه که کاربر میتونه بهش برسه. این دستاوردها باعث افزایش تمایل به دستیابی مواردیه که تقریبا انجام شده. نشون دادن دستاوردهایی که قبلا بدست آورده، در حال دستیابی به اون هاست یا در آینده قراره بهش برسه بسیار مهمه.دو نوع هدف داشته باشید، هم اهداف کوتاه مدت که کاربر بتونه با چند مرحله ی کوتاه بهش برسه، و هم اهداف بلند مدتی که نیاز به وقت و تعامل بیشتر با اپلیکیشن داره.دستاوردهایی که کاربر میتونه در Duolingo بهش برسهتوصیه میشه پیشرفت سطح بالای ایجاد شده توسط کاربر رو نشون بدین. این نمایش یک تصویر بزرگه و وقتی کاربر در مسیر پیشرفت باشه، دیدن دستاورد و توضیح آنچه که بعدا اتفاق میفته حائز اهمیته.صفحه نمایش Duolingo جریان پیشرفت فعلی و آتی رو نشون میده.۴. یک برنامه ی وفاداری داشته باشینجمع آوری امتیاز میتونه یک تکلیفی برای هر کاربر باشه. کاربران معمولا موفقیت هاشون رو بر پایه ی چالش های پیش رو و گرفتن امتیاز از اون ها میدونن. هرچه تسک ها چالش برانگیز بیشتر امتیازات هم بیشتر. موقع امتیاز دادن به کاربر بهش اطلاع بدید چون اینجوری اون ها متوجه میشن که چجوری باید تلاش بیشتری کنن. یه نوار وضعیت روشن و واضح از امتیاراتی که کسب کردن بهشون نشون بدین. امتیازات میتونن بشکل شماره یا نماد باشن. برای مثال Duolingo از Lingots استفاده میکنه.اگه شما برنامه وفاداری ای دارید که کاربران بتونن در اون امتیاز کسب کنن، راهی رو برای خرج کردن اون امتیازات بوسیله ی المان های سرگرم کننده و مفید ارائه بدین.برنامه Duolingo به کاربران اطلاع میده که چگونه از برنامه استفاده کنن و حین بارگذاری صفحات به اهداف شون برسنبه کاربران پیشنهاد بدین تا امتیازات کسب شده شون رو به روش های مختلف بدست بیارن. این محبوبیت رو در بعضی از بازی های آنلاین پیدا کردم:خرید نیرو: کاربران میتونن برای مدت زمان محدودی نیروی فوق العاده ای داشته باشن. اون ها میتونن از این نیرو برای تسک های بعدی و عبور آسون از اون ها استفاده کنن. برای مثال کاربران میتونن برای نادیده گرفتن اشتباهات کوچیک و یا دوبرابر کردن امتیازشون در همون روز نیرو خریداری کنن.ویژگی های ظاهری: وقتی کاربران در حال بازی یا رقابت با سایرین هستن، گاهی ظاهر کاراکتری که بازی میکنن مهمه. کاربران میتونن یکسری متریال ظاهری رو برای بهبود وضعیت ظاهری شون خریداری کنن.حق الامتیاز: کاربران میتونن با دسترسی به قسمت های اضافی بازی، امتیازاتی رو کسب کنن که برای همه در دسترس نیست. برای مثال در Duolingo کاربران میتونن دوره های اضافی ای رو خریداری کنن که در جریان یادگیری منظم شون نباشه.برنامه ی ثابت امتیازدهی در اپلیکیشن Duolingoدر پلتفرم های اجتماعی مربوط به تجارت الکترونیک، کاربران با استفاده از امتیازهایی که جمع آوری کردن، تخفیف میگیرن. این روش محبوب ترین برنامه وفاداری برای ادامه استفاده ی کاربران/ مشتریان از محصول/ فروشگاه شماست.۵. اجازه ی دعوت کردن دوستانباهم بودن همیشه خروجی بهتری داره. اجازه بدبد کاربرانتون در کنار دوستان و رقابت کردن با اون ها به اهداف شون برسن. برای استفاده ی بیشتر از محصول تون و رسیدن کاربر به اهداف ش با استفاده از کسب امتیازات بیشتر باید در کاربران انگیزه ایجاد کنین. در بازی های آنلاین، داشتن لیستی از کاربرانی که می تونن پیشرفت خودشون رو باهاشون مقایسه کنن، بسیار محبوبه و عمومیت داره.بخش از لیگ بازی بشین و دوستانتون رو برای بازی با خودتون دعوت کنین.۶. خطاهارو با بهترین روش کنترل و اداره کنینگاهی اوقات، موقع تلاش برای رسیدن به هدفی شکست میخوریم. در دنیای بازی ها چندین زندگی وجود داره که اگه تموم شه به اصطلاح میگیم "گیم اور" شد. در حالیکه اگه محصولمون دررابطه با آموزش و یادگیری مهارتی باشه، باید مراحل عدم موفقیت رو به روشنی نشون بدیم و حل ش کنیم.در Duolingo پیام های خطا رو با توضیحی در رابطه با اینکه اشتباه چی بوده به نمایش میذارن. اون ها بعد از پاسخ اشتباهی که کاربر به سوال داد، مجددا اون سوال رو از کاربر میپرسن. به این ترتیب وقتی نگرش ما در رابطه با اپلیکیشن مربوط به یادگیری باشه، هیچ حالتی از "گیم اور" شدن وجود نداره و کمتربه پیروز شدن به معنای پیروزی توی یه اپلیکیشن بازی میپردازه.مدیریت خطا در اپلیکیشن Duolingo خلاصه اینکه..امروزه بسیاری از عناصر گیمیفیکیشن (نشان ها، امتیازات، جایزه ها و..) که مسئولیت تعامل و تجربه ی بهتر کاربران رو دارن، علاوه بر بازی های موبایل توی سایر اپلیکیشن های غیر بازی مثل اپ های مربوط به آموزش و یادگیری مهارت های مختلف هم دیده میشن. توی این مقاله سعی کردم با بررسی اپلیکیشن Duolingo، از تاثیر گیمیفیکیشن روی تجربه کاربری بهتر مطالبی رو ارایه بدم تا شاید بتونیم روی سایر اپلیکیشن های خودمون هم از این متدها استفاده کنیم.از جمله متدهای ارایه شده ی این مقاله: تعیین هدفارزیابی درستنمایش نوار پیشرفت کاربرداشتن برنامه ی وفاداری اجازه ی دعوت از دوستان مدیریت صحیح خطاهامنابعhttps://uxdesign.cc/use-some-gamification-to-increase-user-experience-and-engagement-9ff104c22096 UX Unicorn Negin Alizadeh Tue, 02 Jun 2020 10:14:06 +0430 https://virgool.io/ux-unicorn/54-%D8%A7%D8%B5%D8%B7%D9%84%D8%A7%D8%AD-%D8%AA%D8%AE%D8%B5%D8%B5%DB%8C-%DA%A9%D9%87-%D9%87%D8%B1-ux-designer-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D8%A7%D9%86%D8%AF-jyogafyi15mg در این مقاله لیست کاملی از اصطلاحات تخصصی UX جمع آوری شده است. "به کاری که کاربران انجام می‌دهند توجه کنید، نه به آنچه می‌گویند." Jakob Nielsen١. قانون ٣ کلیک ( 3Click Rule )بر اساس قانون 3 کلیک، اگر کاربران نتوانند با ٣ کلیک به صفحه مورد نظر خود برسند، وب سایت را ترک می‌کنند. امروزه بحث در مورد این قانون بسیار زیاد است و از آن به افسانه 3 کلیک یاد می‌کنند و درواقع تاکید بر مساله سادگی است، یعنی تا جای ممکن مسیر را کوتاه کنید. http://kasbokareonline.com/3-click-rule ولی بر اساس قانون تسلر برای هر سیستمی مقداری پیچیدگی ذاتی وجود دارد که نمی‌تواند حذف یا ساده‌تر از آن شود. در نتیجه در طراحی اپلیکیشن‌ها همیشه سطحی از پیچیدگی وجود دارد که نمی‌توان آن را کم کرد و باید به کمک آموزش آن را به کاربران آموزش داد. اینجاست که اهمیت Walkthrough روشن می‌شود. https://virgool.io/@amirtaqiabadi/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D9%81%D8%AA%D8%A7%D8%B1%DB%8C-walkthrough-jmvvbbnak4hn ٢. تست ٥ ثانیه - ( 5Second Test )در تست ٥ ثانیه، رابط کاربری نرم‌افزار یا وب سایت را به مدت ٥ ثانیه به کاربران نمایش می‌دهند و سپس شرکت کننده باید آنچه را که در صفحه مشاهده کرده است، به یاد بیاورد. این یک روش عالی است برای اینکه بدانیم تصاویر اصلی یا دکمه CTA بر کاربر تاثیر صحیح داشته است یا نه؟! https://virgool.io/@amirtaqiabadi/5-second-usability-test-%DA%86%DB%8C%D8%B3%D8%AA-pr4klrryxjfw ٤. قانون ٨٠/٢٠ - ( 80/20Rule ) این قانون مبتنی بر اصل پارتو است. که بر اساس قانون ٨٠/٢٠، با استفاده از هر وب‌سایت، برنامه‌ی وب یا محیط نرم‌افزاری، تنها ٢٠٪ عملکردها و ویژگی‌ها، ٨٠٪ از نتایج را بر عهده خواهند داشت. https://virgool.io/@ombc.ir/%D9%82%D8%A7%D9%86%D9%88%D9%86-8020-%D8%A8%D8%B1%D8%A7%DB%8C-%DA%86%D9%87-%DA%A9%D8%B3%DB%8C-%D8%A7%D8%B3%D8%AA-%D9%88-%DB%8C%D8%B9%D9%86%DB%8C-%DA%86%DB%8C-fjdog0lxn9xk ٤. تست A/B Testing ) - A/B ) تست A/B زمانی است که دو نسخه مختلف از محصول را با کاربران تست می‌کنید تا ببینید کدام یک را ترجیح می‌دهند. https://virgool.io/@piinstartup/%D8%AA%D8%B3%D8%AA-ab-%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D8%B1%D9%88%D8%B4-%D8%A8%D8%B1%D8%A7%DB%8C-%DA%A9%D8%B4%D9%81-%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D8%A7%D8%B3%D8%AA%D8%B1%D8%A7%D8%AA%DA%98%DB%8C-%D9%87%D8%A7-%D9%88-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%D8%A7%D8%AA-lxaibdtkj2p8 ٥. قابلیت دسترسی - ( Accessibility )قابلیت دسترسی امکانی است که افراد با استفاده از آن می‌توانند از وب‌سایت یا اپلیکیشن استفاده و آن را درک کنند. Accessibility به نحوه هماهنگ سازی وب‌سایت‌ها و برنامه‌ها برای افرادی دارای معلولیت یا با نیازهای ویژه اشاره دارد. مانند استفاده از رنگ‌ها به نحوی که افراد کور‌رنگ یا کم‌بینا هم بتوانند از سایت استفاده کنند. https://virgool.io/JavaScript8/web-accessibility-capglgmj5tzk ٦. تکنیک Active Listeningاین یک روش مصاحبه است که مصاحبه کننده با دقت به تمام صحبت‌های افراد گوش می‌کند و بازخورد لازم را برای ادامه مکالمه ارائه می دهد.٧. ابزار Analytics با ابزار Analytics می‌توانید اطلاعات ارزشمندی درباره ترافیک وب ‌سایت و اپلیکیشن خود به دست آورید. این ابزار به شما می‌گوید ترافیک شما از کجا می‌آید و به کجا منتقل می شود. ابزار آنالتیکس بازخورد خوبی از کارایی بخش های مختلف سایت به شما می دهد. https://virgool.io/@sainayasobi/google-analyticssainayasobi-sgq3zroveliu ٨. مرتب سازی کارت - ( Card Sorting )مرتب سازی کارت روشی است که از آن برای کمک به طراحی یا ارزیابی معماری اطلاعات یک سایت استفاده می‌کنند. در یک جلسه Card Sorting، شرکت کنندگان موضوعات را براساس دسته‌هایی که برای آنها معنی دارد مرتب ‌کنند. همچنین ممکن است از آن‌ها خواسته شود این گروه‌ها را با برچسب نام‌گذاری کنند. برای انجام یک نوع Card Sorting، می توانید از کارتها، استیکی نوت، تکه های کاغذ یا ابزار Card Sorting آنلاین استفاده کنید. https://virgool.io/DesignersCommunity/%D9%85%D8%B1%D8%AA%D8%A8-%D8%B3%D8%A7%D8%B2%DB%8C-%DA%A9%D8%A7%D8%B1%D8%AA-%DB%8C%D8%A7-card-sorting-rw0ztoqes9dr ٩. ابزار Clickstream Analysisابزار Clickstream Analysis فرایند جمع آوری و تجزیه و تحلیل داده‌هایی است که بازدید کننده وب‌سایت از کدام صفحه بازدید می‌کند، و به چه ترتیبی صفحات را باز می‌کند. در واقع به مسیری که بازدیدکننده در سایت برای دیدن صفحات یا خرید محصول طی می‌کند clickstream گفته می شود. https://youtu.be/weJI6Lp9Vw0 ١٠. تجزیه و تحلیل رقبا - ( Competitor Analysis )تجزیه و تحلیل رقبا، ارزیابی از نقاط قوت و ضعف رقبای فعلی و بالقوه است.١١. مفهوم استفاده از تجزیه و تحلیل‌ها - ( Context of Use Analysis )مفهوم استفاده از تجزیه و تحلیل‌ها شامل جمع آوری و تجزیه و تحلیل اطلاعات در مورد کاربران در نظر گرفته شده، وظایف آنها، ابزارهایی برای پشتیبانی از اهداف‌شان، محیط فیزیکی که از محصول در آن استفاده خواهد شد، محدودیت‌های فنی و سایر عوامل موثر بر تجربه کاربر می‌باشد. این نتایج می تواند با استفاده از مصاحبه، کارگاه‌های آموزشی، نظرسنجی‌ها، بازدید از سایت، گروه‌های متمرکز مطالعات از طریق مشاهدات و پرسشنامه جمع آوری شود.١٢. نرخ تبدیل - ( Conversion Rate )نرخ تبدیل، درصد بازدیدکنندگانی است که روند خرید محصول را هدفمند، بصورت آنلاین انجام می‌دهند.در تجارت الکترونیکی، عمل تبدیل بازدید کنندگان سایت به مشتری با مارکتینگ انجام می‌شود. روند بهبود نرخ تبدیل بهینه‌سازی نرخ تبدیل نامیده می‌شود. https://virgool.io/businessshop/%D9%86%D8%B1%D8%AE-%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D9%87-%D8%B2%D9%85%D8%A7%D9%86%DB%8C-%D8%A8%D8%AF%D8%B1%D8%AF-%D9%85%DB%8C-%D8%AE%D9%88%D8%B1%D8%AF-aluzbklzxzfy ١٣. بررسی گزارشات روزانه - ( Diary Study )بررسی گزارشات روزانه یک روش تحقیق برای جمع آوری داده‌های کیفی است که در مورد رفتارها، فعالیت ها و تجربیات کاربر در طول زمان اطلاعاتی را به ما می‌دهد. که بر اساس آن، طراحان UX گزارشی از فعالیت کاربران را در طی چند روز و در بعضی موارد تا بیش از چندماه بررسی می‌کنند و در آخر مجموعه‌ای از اطلاعات مود نیاز در مورد رفتار کاربر در یک محصول خاص خواهند داشت.١٤. کاربران نهایی - ( End Users )افرادی که کاربر یک وب‌سایت هستند و از یک سایت یا اپلیکیشن استفاده می‌کنند و یا افرادی که در یک موضوع مطالعاتی شرکت می‌کنند End Users هستند.١٥. تعامل کاربر - ( User Engagement )تعامل کاربر در مورد توجه کاربران به محصول و نگه داشتن آن‌ها است. هر چیزی که به کاربر کمک می کند تا بر روی یک صفحه یا صفحه نمایش متمرکز شود (خواه دکمه باشد یا منو) بسیار مهم است. https://virgool.io/@novinhub/%D9%85%D8%B4%D8%A7%D8%B1%DA%A9%D8%AA-%DB%8C%D8%A7-%D8%A7%DB%8C%D9%86%DA%AF%DB%8C%D8%AC%D9%85%D9%86%D8%AA-engagement-%DA%86%DB%8C%D8%B3%D8%AA-wckippknqcsu ١٦. قسمت ورودی - ( Entry Field )فیلدهای ورودی که به عنوان فیلد ورود اطلاعات یا متن شناخته می‌شود. وقتی کاربر لازم است تا متن یا اطلاعاتی را وارد کند.١٧. تجزیه و تحلیل خطا - ( Error Analysis )بخشی از تجزیه و تحلیل که فرکانس و نوع خطاهایی را که برای هر مجموعه‌ی مشخص از جریان کار ایجاد می‌شود، مشخص می‌کند.١٨. نرخ خطا - ( Error Rate )وقتی که یک خطا در یک بازه‌ی زمانی تکرار می‌شود براساس نرخ خطا سنجیده می‌شود.١٩. تحقیقات مردم نگاری - (Ethnography/Ethnographic Research)این روش مطالعه رفتار افراد در محیط خود از طریق استفاده از روش‌هایی مانند مشاهده و مصاحبه حضوری است. https://youtu.be/GixIqVINkVw ٢٠. ابزار Eye Trackingاین ابزار برای اندازه‌گیری فعالیت چشم در صفحه یا یک محیط است. نرم افزار ردیابی چشم به شما امکان می‌دهد تا حرکت چشمی کاربران روی صفحه نمایش را ردیابی کنید. این ابزار می تواند مشخص کند که آنها بیشتر به چه ترتیبی نگاه می کنند . https://youtu.be/lo_a2cfBUGc ٢١. نمودار فیشبون - ( Fishbone Diagram )نمودار طراحی شده برای شناسایی روابط علت و معلولی بین عوامل موجود در یک وضعیت معین است. این نمودار از یک بدنه مانند ستون فقرات ماهی تشکیل شده است که عوامل و دسته بندی عوامل استخوانهای موجود در ستون فقرات را نشان می دهد. https://youtu.be/BW4qvULMJjs ٢٢. قانون Fitt’s Lawیک مدل ریاضی که پیش‌بینی می‌کند چه مدت طول خواهد کشید تا هدف را براساس اندازه و نزدیکی هدف مشخص کنید. هر چه فاصله دورتر و کوچکتر باشد‌، مدت زمان بیشتری برای تعامل کاربر با آن طول خواهد کشید. https://youtu.be/0OPmsy7SXoM ٢٣. گروه کانونی - ( Focus Group )این یک گفتگو با گروهی از شرکت کنندگان است که یک مجری مجموعه سؤالات مربوط به یک موضوع خاص را می‌پرسد. از نتایج آن بدست آوردن بازخورد در مورد کاربران، محصولات، مفاهیم، نمونه های اولیه، وظایف استراتژی ها و محیط ها است. https://youtu.be/pNxkyFRyHWQ ٢٤. لیست رایگان - ( Free Listing )روشی برای جمع‌آوری داده‌ها، جهت به دست‌آوردن بینش کاربر برای یک موضوع خاص می‌باشد. برای انجام این‌کار از مردم درخواست می‌شود تا تمام مواردی را که با موضوع مرتبط است عنوان کنند. ٢٥. اصول گشتالت - ( Gestalt Principles )از اصول گشتالت به عنوان "قانون سادگی" هم نام می‌برند. بر اساس این قانون، هر محرک به ساده‌ترین شکل درک می‌شود. افراد بصری موارد را به صورت جداگانه درک نمی کنند ، بلکه به عنوان بخشی از یک کل بزرگتر هستند. https://virgool.io/@amirtaqiabadi/gestalt-principles-in-ui-ide7dxat6sik ٢٦. متد Heart Frameworkمتد Google’s Heart Framework به شما این امکان را می‌دهد که تجربه کاربر را در مقیاس وسیعی اندازه‌گیری کنید. معیارهای اندازه‌گیری شده عبارتند از: میزان رضایت، مشارکت، اقتباس، ماندگاری در حافظه و تحلیل‌کارها. https://youtu.be/YugESrDVHuo ٢٧. قانون هیک - ( Hick’s Law )قانون هیک، زمان لازم را برای تصمیم‌گیری در نتیجه‌ی انتخاب احتمالی کاربر، توصیف‌ می‌کند. افزایش تعداد گزینه‌ها باعث افزایش زمان تصمیم‌گیری می شود.نمودار قانون هیک٢٨. عوامل انسانی - ( Human Factors )عوامل انسانی و ارگونومی (که به عنوان طراحی راحت نیز شناخته می شود) تمرینی است در طراحی محصولات سیستم‌ها یا فرآیندها برای در نظر گرفتن تعامل صحیح بین آنها و افرادی که از آنها استفاده می‌کنند.٢٩. مطالعات رهگیری - ( Intercept Studies )نظرسنجی رهگیری، نظرسنجی‌هایی است که بصورت حضوری و بطور کلی در یک مکان عمومی یا تجاری انجام می‌شود. به عنوان مثال، مصاحبه كنندگان ممكن است به افرادی كه از مغازه خارج می شوند نزدیك شوند و از آنها بخواهند در مورد تجربیاتشان با آنها مصاحبه كنند. https://www.smashingmagazine.com/2016/02/the-art-of-the-intercept/ ٣٠. قانون KISS" آن را ساده نگه دارید." قانون KISS در سال ١٩٦٠ توسط ایالات متحده نیروی دریایی طراحی شد. این قانون بر سادگی تاکید دارد و اظهار داشت كه بیشتر سیستم‌ها اگر ساده نگه داشته شوند بهتر عمل می‌كنند. سادگی یک هدف اصلی در طراحی است. https://www.chetor.com/154274-%D8%A7%D8%B5%D9%84-%D8%B3%D8%A7%D8%AF%DA%AF%DB%8C-kiss/ ٣١. یادگیری - ( Learnability )یادگیری استفاده‌ی موثر از یک سیستم یا رابط کاربری چقدر آسان یا دشوار است.٣٢. مقیاس لیکرت - ( Likert Scale )این یک روش پیمایشی است که در آن از شخص خواسته می شود پاسخ خود را در مقیاس ارزیابی کند. مقیاس می تواند مثبت یا منفی یا نمره خنثی باشد.٣٣. نقشه ذهنی / مدل ذهن - ( Mental Map / Mental Model )هرچه مدل ذهنی کاربران نزدیک به کارایی سایت باشد، قابلیت استفاده سایت بیشتر می‌شود. https://virgool.io/@amirtaqiabadi/mental-design-o2ehfnbwcxzz ٣٤. مین‌سازی - ( Minesweeping )برای شناسایی جاهایی در صفحه که لینک‌ قرار داده شده، طراحی شده است. Minesweeping جابجایی کاربر را به سرعت در حال حرکت مکان‌نما بر روی یک صفحه، مشاهده می‌کند که مکان‌نما یا نشانگر در چه مکانی تغییر می‌کند تا نشان دهنده وجود یک لینک باشد. چنین طراحی‌هایی نیاز به کاربر دارد تا به جای اینکه عناصر رابط، خود نمایانگر معنی خود باشند، کاربر رابط را کشف و بررسی کند و معنای هر عنصر رابط را پیدا کند. https://www.usabilityfirst.com/glossary/minesweeping/index.html ٣٥. طراحی مشارکتی - ( Participatory Design )طراحی مشارکتی (بطور کلی co-operative design ) رویکردی برای طراحی است که سعی می‌کند همه‌ی ذینفعان به عنوان مثال کارمندان، شرکا، مشتریا، کاربران نهایی را به طور فعال درگیر کند. هدف این است که اطمینان حاصل شود که نتیجه، پاسخگوی نیازهای آنها باشد. https://youtu.be/BK42vN19-1E ٣٦. مسیر کاربر - ( Path )مسیری که توسط یک کاربر در هنگام حرکت در یک وب سایت انجام می ‌شود.٣٧. پرسونا - ( Persona )ایجاد یک کاربر نماینده بر اساس داده‌های موجود و مصاحبه با کاربران. اگرچه ممکن است جزئیات شخصی شخصیت، داستانی باشد و اطلاعاتی که برای ایجاد نوع کاربر استفاده می شود نباشد. https://virgool.io/@imann6867/%D9%BE%D8%B1%D8%B3%D9%88%D9%86%D8%A7-persona-%DA%86%DB%8C%D8%B3%D8%AA-mbrblm2jy6fc ٣٨. تحقیقات کیفی - ( Qualitative Research )مطالعه رفتار انسانی که بجای تکیه بر داده‌ها یا آمارها بر محتوا و مشاهدات تمرکز دارد. https://youtu.be/ipHiz6dzKFg ٣٩. تحقیقات کمی - ( Quantitative Research )مطالعه رفتار انسانی که بر داده‌ها و آمارهای عددی متمرکز است. این کار از طریق نظرسنجی، پرسشنامه و نظرسنجی قابل انجام است. https://youtu.be/gml1RfLNS5E ٤٠. تست‌های کاربردپذیری از راه دور - ( Remote Usability Studies )تست کاربردپذیری از راه دور به شما این امکان را می‌دهد تا با استفاده از نرم افزار اشتراک گذاری صفحه، تحقیقات کاربر را با شرکت‌کنندگان در محیط خود انجام دهید و همچنین این امکان را فرام می‌کند تا چهره و صدای شرکت کنندگان را ضبط کنید.مزیت این نوع تحقیقات این است که جمع شرکت‌کنندگان می‌تواند بسیار بزرگتر از مکان شخصی شما باشد. در نتیجه می‌توانید جلسات تحقیقاتی بیشتری را در مدت زمان کوتاه‌تری برگزار کنید. https://youtu.be/vthW7mmn854 ٤١. نمونه‌گیری سمپل - ( Representative Sampling )گروهی از شرکت‌کنندگان را انتخاب کنید که مخاطب هدف شما هستند. https://youtu.be/KkqXbw43yxc ٤٢. نظر سنجی - ( Survey )نظرسنجی لیستی از سؤالات با هدف بدست آوردن داده‌های خاص از گروه خاصی از افراد است. ممکن است نظرسنجی‌ها از طریق تلفن، اینترنت، رو در رو و روش های مختلف دیگری انجام شود. https://youtu.be/bi2JMRpL9Ik ٤٣. بازار هدف - ( Target Market )مجموعه کاربرانی که محصولی برای آنها طراحی شده است.٤٤. تجزیه و تحلیل تسک‌ها - ( Task Analysis )روشی است برای شناسایی و درک فعالیت‌هایی که توسط کاربران هنگام تعامل با وب سایت یا برنامه استفاده می‌شود.٤٥. نمودار جریان‌کار - ( Task Analysis )بازنمایی بصری از وظایف و روابط متقابلی که در یک سایت وجود دارد.٤٦. با صدای بلند فکر کنید - ( Think Aloud )فکر کردن با صدای بلند (یا بلند فکر کردن) روشی است برای جمع‌آوری داده‌ها که در تست کاربردپذیری استفاده می‌شود. در طول تست کاربردپذیری از کاربر خواسته می‌شود تا با صدای بلند آنچه می‌بیند و انجام می‌دهد را بگوید، که به جمع آوری اطلاعات ارزشمند کمک می‌کند.٤٧. مطالعات واقع‌بینانه - ( True Intent Studies )مطالعات واقع‌بینانه تجربه‌ای را که کاربران با یک وب سایت دارند سنجیده و بینش صحیحی را برای بهبود طراحی با پاسخ دادن به سؤالات زیر ارائه می‌دهند:چه کسی بازدید می کند؟چرا آنها می آیند؟چه چیزی را دوست دارند یا دوست ندارند؟چقدر موفق هستند؟پاسخ این سؤالات به ما کمک می‌کند تا با کاربران همدلی کنیم و چگونگی رفع نیازهای آنها را بفهمیم. https://youtu.be/WWjj5UPqvE0 ٤٨. قابلیت استفاده - ( Usability )چقدر کاربر می‌تواند با یک رابط کاربری تعامل موثر، کارآمد و رضایت بخش داشته باشد. https://virgool.io/@negin.yashmi/usabilitytest-pheteqvybnd2 ٤٩. تست کاربردپذیری تحلیل رقبا - ( Usability Benchmarking )در این روش تست‌های کابردپذیری را بر روی سایت‌های رقبا یا برنامه‌های مشابه انجام می‌دهند که براساس نتایج آن می‌توان به معیارهای خوبی برای محصول جدید دست پیدا کرد. https://virgool.io/@mostafaroshani/%D8%A8%D9%86%DA%86-%D9%85%D8%A7%D8%B1%DA%A9%DB%8C%D9%86%DA%AF-%D8%A7%D9%84%DA%AF%D9%88%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C-%DA%86%DB%8C%D8%B3%D8%AA-xzoegd0i7vfv ٥٠. تست کاربردپذیری در آزمایشگاه - ( Usability Lab )فضایی که برای انجام تست‌های کاربردپذیری با مشاهده تعامل کاربر با یک سیستم و ثبت فعالیت‌های آنها تعیین شده است. ناظران ممکن است از طریق آینه‌های دو طرفه یا دوربین مداربسته رفتار کاربران را در اتاق دیگری مشاهده کنند.٥١. جریان کاربر - ( User Flow )جریان کاربر مراحلی است که یک کاربر برای انجام یک کار طی می‌کند. "مسیر برتر یا top path" رایج‌ترین جریان کاربر است. https://virgool.io/@amirtaqiabadi/user-flow-%DA%86%DB%8C%D8%B3%D8%AA-ztgwtkpnunih ٥٢. تحقیقات کاربر - ( User Research )تحقیقات کاربر بر درک نیازهای کاربر، رفتارها و انگیزه ها از طریق تکنیک‌های مشاهده، تجزیه و تحلیل کار و بسیاری روش های دیگر متمرکز شده است. https://virgool.io/@SadeghEidi/%D8%A7%D9%86%D9%88%D8%A7%D8%B9-%D8%B1%D9%88%D8%B4-%D9%87%D8%A7%DB%8C-%D8%AA%D8%AD%D9%82%DB%8C%D9%82-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-user-research-ctxzjts5vpnw ٥٣. تست Blurry-eye ما زمانی که بر روی یک موضوع متمرکزیم همزمان تصویری مات از حوالی آن نقطه‌ی تمرکز رو برای بررسی ناخودآگاه به مغز می‌فرستیم.این کار باعث می‌شه ارتباط بین اجزا و BigPicture در مغز شکل بگیره که به تصمیم‌گیری بهتر کمک می‌کنه. در نتیجه مهمه که تصویر مبهمی که چشم به مغز می‌فرسته هم حاوی اطلاعات مفیدی باشه.براساس این تست یا با ابزار blure در نرم افزار فتوشاپ و یا با کشیدن گوشه های چشم UI نهایی رو به صورت تار نیز تماشا کنیم تا ببینین آیا روابط و اولویت بین المان‌ها در این شرایط رعایت شده است یا نه. https://virgool.io/@amirtaqiabadi/blur-usability-test-%DA%86%DB%8C%D8%B3%D8%AA-sspcndi26cv8 ٥٤. تست چریکی یا گوریلا تست ( Guerilla Usability Test )یکی از روش‌های تست کاربر گوریلا تست است که شما با افراد در یک مکان عمومی مثل کافی‌شاپ، پارک و یا فضای اداری صحبت می‌کنید و از آنها می‌خواهید که درمورد محصول یا سرویسی که ساختید به شما فیدبک بدهند.‌تست چریکی برای شناسایی مشکلات عملکردی محصول در قدم‌های اولیه می‌تواند خیلی مفید باشد. این تست به خاطر کم‌هزینه‌بودن، سرعت، راحتی و اجرای آن در فضای حقیقی میتونه نتایج قابل‌اعتمادی ایجاد کند. https://virgool.io/ux-unicorn/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D8%AA%D8%B3%D8%AA-%DA%86%D8%B1%DB%8C%DA%A9%DB%8C-%DB%8C%D8%A7-guerilla-usability-test-m4904exul7fk "ناراضی ترین مشتریان شما، بزرگترین منبع یادگیری شما هستند." Bill Gatesممنونم بخاطر مطالعه این مقاله، می‌توانید آن را علامت‌گذاری کنید و از آن به عنوان یک مقاله مرجع استفاده کنید. اگر موردی هست که فکر می‌کنید می‌تواند به این لیست اضافه شود، لطفاً در کامنت برای من بنویسید.اصل این مقاله را نیز می‌توانید از اینجا مطالعه کنید. UX Unicorn زیبا نوربخش Sat, 30 May 2020 14:05:18 +0430 https://virgool.io/ux-unicorn/%D9%85%D8%AD%D8%A7%D8%B3%D8%A8%D9%87-%D9%85%D8%B9%DB%8C%D8%A7%D8%B1%D9%87%D8%A7%DB%8C-%DA%A9%D9%84%DB%8C%D8%AF%DB%8C-kpi-%D8%AF%D8%B1-%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-%D9%87%D8%A7%DB%8C-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-d7iyljwkco1u اپلیکیشن های موبایل تون واقعا چقدر بدرد بخورن؟ معیارهای اساسی سودآوری و درگیرکردن بهترین راه برای پیدا کردن این سؤالن.چجوری متوجه میشین که برنامه موبایلتون بخوبی کار میکنه؟جوابش ساده س: داده(دیتا)درست مثل هر کانال بازاریابی دیگه، موبایل اومده تا با یسری از معیارها، با تفاوت ایجاد کردن بین موفقیت و شکست به بازاریابان کمک کنه.محاسبه و تحلیل این معیارها خیلی مهمه چون بهتون کمک کنه تا "چرایی" و "چگونگی " تعامل کاربر با اپیلیکشن تون رو درک کنین.این معیارها میتونن بهتون در کشف اینکه ایا اپلیکیشن تون پول سازه یا نه کمک کنن.چرا این کار ضرورت داره؟ چون شما باید قبل از بهبود اپلیکیشن تون، عملکردش رو کاملا درک کنین."اما اطلاعات زیادی در اینجا موجوده – کاربران فعال روزانه (DAU)، کاربران فعال ماهیانه (MAU)، بازگشت سرمایه گذاری (ROI) – کدومش مهم تره؟"یه تازه وارد تو حوزه ی آنالیز اپلیکیشن های موبایل براحتی سردرگم میشه. مخصوصا با اون همه حروف اختصاری. اما جای نگرانی نیست، ما اینجاییم تا این سردرگمی رو براتون کمترش کنیم.این مقاله با کشف معیارهای کلیدی به همراه گام ها و چگونگی اندازه گیری اون مراحل، که باید در اپلیکیشن تون لحاظ کنین بهتون کمک میکنه.موضوعات این مقاله- معیارهای درگیری و استفاده- معیارهای سودآوری- معیار طلاییمعیارهای درگیری و استفاده اپلیکیشنحقیقت جالب: ۲۵ درصد از اپلیکیشن های دانلود شده ی موبایل فقط و فقط یکبار استفاده میشن.با افزایش رقابت در بازار اپلیکشن های موبایل، دونستن اینکه مردم چجوری با اپلیکیشن شون درگیر میشن و چی باعث میشه تا همچنان ازش استفاده کنن برای بازاریابان اهمیت خیلی زیادی داره.شما میتونین براحتی و با استفاده از ابزارهای محبوب آنالیز اپلیکیشن های موبایل مثل Google Analytics، Kissmetrics، Flurry، Mixpanel یا Localytics، بسیاری از معیارهای اصلی درگیری و استفاده رو محاسبه کنین.در این بخش، بعضی از معیارهای درگیری و استفاده که شما برای اپلیکیشن موبایل تون نیاز به محاسبه ش دارید رو بررسی میکنیم:۱. دانلود و نصبشما همیشه باید بدونین که چند نفر اپلیکیشن شما رو نصب کردن.با این حال، بخاطر داشته باشین که این معیار هرگز به تنهایی موفقیت اپلیکیشن موبایل تون رو نشون نمیده. اگه کاربران صرفا بخاطر یه کمپین بازاریابی مشخصی اپلیکشن شما رو دانلود کنن و هرگز ازش استفاده نکنن یا پاکش کنن چی؟همیشه، تعداد اپلیکیشن های نصب شده مهمه چون پایه و اساس سایر معیارهاییه که شما بایدبرای آنالیز بهتر محاسبه ش کنین.نحوه ی محاسبه دانلود و نصب اپلیکیشنشما براحتی میتونین با استفاده از گوگل آنالیتیک، تنظمیات مربوط به نصب اپلیکیشن رو برای سیستم عامل های Android و iOS محاسبه کنین. در اینجا راهنمای گام به گام چگونگی انجام اینکار آورده شده است.۲. نصب اپلیکیشن (App Acquisition)خب، میدونین که چند نفر اپلیکیشن شمارو دانلود کردن. اما آیا میدونین این دانلودها از کجا اومدن؟ این چیزیه که نصب اپلیکیشن به شما میگه.نصب اپلیکیشن، کارایی کمپین ها و کانال های بازاریابی شما رو نشون میده وبه شما کمک میکنه تا بیشترین درآمد رو در بازاریابی خودتون داشته باشین.به عنوان مثال اگر چندین کمپین یا تبلیغ رو اجرا میکنین، این معیار بهتون کمک میکنه که چکاری رو انجام بدین یا انجام ندین، بنابراین شما میتونین روی سرمایه گذاری در نقاط مشکل تمرکز کنین.نحوه ی محاسبه نصب اپلیکیشنشما میتونین نصب اپلیکیشن تون رو از طریق Google Analytics ردیابی کنین، یا بجای اون از پلتفرم تجزیه و تحلیل تجاری Mixpanel استفاده کنین.در اینجا اومده که Mixpanel چجوری به طور معمول منبع کمپین کاربران شمارو دسته بندی میکنه:نمودار بالا نشون میده که کاربران چجوری تبلیغات رو در اپلیکیشن های Facebook، Twitter، AdMob، Brightroll و Tapjoy پیدا میکنن.۳. کاربران فعالهمه ی افرادی که اپلیکیشن شمارو دانلود میکنن کاربران فعالی نیستن. کاربران فعال مرتبا اپلیکیشن شمارو باز میکنن و باهاش درگیر هستن.این معیار مهمه چون نشون میده اپلیکیشن شما چقدر کاربرانتون رو درگیر خودش میکنه و براشون مفیده.بنابراین، چه چیزی کاربر رو بعنوان یک "کاربر فعال" دسته بندی میکنه؟ این بستگی به ابزار تحلیل مورد استفاده تون داره.طبق گوگل آنالیتیک، کاربر فعال کسیه که طی 30 روز گذشته اپلیکیشن رو باز کرده و باهاش تعامل داشته.کاربران فعال رو میتونیم به دو دسته ی کاربران فعال روزانه (Daily Active Users) و کاربران فعال ماهیانه (Monthly Active Users) تقسیم کنیم.تعداد کاربرانی رو که حداقل یکبار در روز از اپلیکیشن شما استفاده میکنن رو میسنجه (DAU).تعداد کاربرانی که حداقل یکبار در ماه از اپلیکیشن شما استفاده میکنن رو میسنجه (MAU).نحوه ی محاسبه کاربران فعال اپلیکیشن هامیتونین تعداد کاربران فعال روزانه (DAU) و تعداد کاربران فعال ماهیانه (MAU) رو با استفاده از ابزارهای تحلیل اندازه گیری کنین.در اینجا گوگل آنالیتیک چگونگی نمایش کاربران فعال اپلیکیشن موبایل را نشان میدهد:خط آبی تیره کاربران فعال در 7 روز گذشته، یا تعداد کاربران منحصربفردی که طی7 روز گذشته از سایت یا اپلیکیشن شما استفاده کردن رو نشون میده. خط آبی روشن کاربران فعال 14 روز اخیر رو نشون میده.۴. چسبندگی (Stickiness)نسبت چسبندگی نشون میده که کاربران چندبار به اپلیکیشن شما برمیگردن.برای محاسبه ی چسبندگی، شما فقط مقدار DAU را بر MAU تقسیم میکنین. نتیجه ی بددست اومده رو در 100 ضرب کنین تا درصدی رو بدست بیارین.100 * تعداد کاربران فعال ماهیانه (MAU) / تعداد کاربران فعال روزانه (DAU)نحوه ی محاسبه چسبندگی اپلیکیشن هرچه این درصد بالاتر باشه بهتره. این به این معنیه که چسبندگی کاربران فعال ماهانه تون به اندازه کافی زیاد هست که تبدیل به کاربران فعال روزانه بشن.۵. میانگین استفاده روزانه (Average Daily Sessions) به ازای کاربر فعال روزانه (Daily Active Users)میانگین استفاده روزانه به ازای کاربر فعال روزانه (DAU) نشون میده که بطور متوسط هر کاربر چندبار در روز اپلیکیشن شمارو باز میکنه یا باهاش درگیر میشه.بنابراین، کاربر چند بار در روز از اپلیکیشن شما استفاده کنه خوبه؟ بستگی داره.برنامه های مربوط به رسانه های اچتماعی مثل فیس بوک، اینستاگرام یا واتس اپ میخوان که میانگین تعداد دفعات استفاده کاربرانشون بالاتر یا بیشتر باشه.سایر اپلیکیشن ها نیازی ندارن که خیلی زیاد استفاده بشن و ممکنه با تعداد کمتر هم موفق بشن.نحوه ی محاسبه میانگین استفاده روزانه به ازای هر کاربر فعال روزانه (DAU) ۶. میانگین مدت زمان بازدیدمیانگین مدت زمان بازدید به شما میگه که یه کاربر چه بازه ای رو در تعامل با اپلیکیشن شما سپری میکنه.این معیار خیلی مهمیه چون به شما میگه که کاربرانتون چقدر درگیر هستن. بطور مثال اگر شما یه اپلیکیشن تجارت الکترونیک دارین، آیا کاربران برای مدت زمان طولانی تری اپلیکیشن شمارو بازدید میکنن؟ یا، بعد از چند ثانیه اپلیکیشن شمارو میبندن؟نحوه ی محاسبه میانگین مدت زمان بازدیدمیتونین میانگین مدت زمان بازدید رو با اشتفاده از گوگل آنالیتیک یا هر ابزار آنالیز دیگه تحلیل کنین. در اینجا چگونگی استفاده از ابزار Google Analytics رو برای ردیابی میانگین بازدید ارائه شده.۷. جریان صفحه نمایشآنالیز جریان صفحه نمایش تعامل کاربران با اپلیکیشن شمارو به شکل صفحه به صفحه تحلیل میکنه.در اینجا یه گزارش معمولی رو ارائه دادیم:بعنوان مثال میتونین خروجی های صفحه رو ردیابی کنین و مسیر ناوبری کاربران از طریق صفحات مختلف و تعداد بازدیدهای مربوط به هر صفحه رو کشف کنین.جریان صفحه نمایش نقاط مشکل در اپلیکیشن مانند تعامل کاربران صفحه نمایش قبل از خروج از اپلیکیشن تون براتون نکته بندی میکنه.شما میتونین از این داده برای بهبود نقاط مشکل واستفاده ی مجدد کاربران از دست رفته استفاده کنین.نحوه ی محاسبه جریان صفحه نمایش اپلیکیشنگوگل آنالیتیک یک ابزار عالی برای کمک به این مورده.۸. نرخ نگهداری (Retention Rate)نرخ نگهداری اپلیکیشن، کاربرانی را که بعد از استفاده از اپلیکیشن در زمانی دیگر به برنامه ی شما بازمیگردن رو اندازه گیری میکنه. به بیان ساده تر، نرخ تعداد کاربرانی رو که بعد از زمان مشخص از برنامه تون خارج میشن اما دوباره به اون برمیگردن رو اندازه گیری میکنه.مردم براحتی کسل میشن. حفظ کاربران بازگشتی به اپلیکیشن یکی از بزرگترین چالش های شما برای رسیدن به موفقیت است.این معیار در اجرای ویژگی ها یا بروز رسانی های جدید هم میتونه مفید باشه. این معیار کمک میکنه.نحوه ی محاسبه نگهداری اپلیکیشنشما همچنین میتونین این راهنمای گام به گام در رابطه با نحوه ی اندازه گیری نگهداری بوسیله ی گوگل آنالیتیک، بررسی کنین.۹. نرخ ریزش (Churn Rate)نرخ ریزش بر خلاف نرخ نگهداری است.این نرخ به شما میگه که چگونه کابران بعد از یه مدت، استفاده از اپ شما رو متوقف میکنن.نحوه ی محاسبه نرخ ریزش اپلیکیشن معیارهای سودآوریمحاسبه اینکه با اپلیکیشن موبایل خودتون قراره چقدر پول بدست بیارین.اینجا یکسری معیارهای کلیدی سودآوری هست که شما باید برای اپلیکیشن موبایل خودتون محاسبه ش کنین.۱۰. درآمد متوسط به ازای هر کاربر (Average Revenue Per User)این معیار به شما میگه که بطور متوسط از هر کاربر بشکل اشتراک، خریدهای درون برنامه ای، دانلودهای خریداری شده، کلیک های تبلیغاتی، یا هر کانال پرداختی دیگه قراره چقدر کسب درآمد کنین.این رقم خیلی مهمه چون ارزش کلی ای که یک کاربر به تنهایی به اپلیکشین شما میده رو بهتون میگه.نحوه ی محاسبه درآمد متوسط به ازای هر کاربر (ARPU) ۱۱. مقدار هزینه به ازای نصب اپلیکیشن (Cost Per Acquisition)در ابتدا بنظر میرسه که تعداد کل دانلودها یا تبدیل ها کافیه تا به شما بگه عملکرد برنامه تون چقدر خوبه.اما باید بدونین که نصب برنامه با کاربران جدید چقدر براتون هزینه داره.نحوه ی محاسبه مقدار هزینه به ازای هر نصب (CPA) ۱۲. بازگشت سرمایه (Return On Investment)این معیار مقدار پول بدست آمده (برگشتی) تون رو برمبنای پولی که صرف ساختن و بازاریابی برای اپلیکیشن تون خرج کردید رو میسنجه.نحوه ی محاسبه ROI اپلیکیشن ۱۳. ارزش طول عمر (Lifetime Value)براورد ارزش طول عمر اپلیکیشن (LTV) به شما کمک میکنه که بفهمید چقدر اپلیکیشن شما برای هر مشتری مفید واقع شده.یادتون باشه، LTV شما همیشه باید بیشتر از CPA شما باشه، اگه اینجوری نباشه معنیش اینه که شما هزینه ی خیلی زیادی رو دارین بابت مشتریانتون میپردازین.میانگین تعداد سالهایی که مشتری با شما میمونه، بعنوان میانگین ارزش طول عمر مشتری شناخته میشه، بسته به نوع مشتریانتون متفاوته.بطور مثال اگر مشتریان هدف تون تو بازه ی سنی 18 تا 24 باشن، بعد از گذشت 4 یا 5 سال از اون گروه سنی خارج میشن.نحوه ی محاسبه ارزش طول عمر اپلیکیشن (LTV)۱۴. معیار طلاییمهم نیست چندتا معیار رو دنبال میکنین، رتبه بندی ستاره برنامه مهم ترین و علنی ترین چیزه. شما باید روی راه های افزایش تعداد بازدید کنندگان اپلیکیشن تون تمرکز کنین.بیشتر مردم همیشه رتبه بندی اپلیکیشن رو قبل از دانلود اون چک میکنن.صرف نظر از اینکه چقدر در سایر بخش های اپلیکیشن تون سرمایه گذاری میکنین، اگر رتبه تون توی فروشگاه های اپ استور یا گوگل پلی ضعیف باشه کاربران بالقوه تون رو از دست میدین.روی معیارهای مهم تمرکز کنینتجزیه و تحلیل موبایل ممکنه آسون بنظر بیاد، اما شما باید قبل از غوطه ور شدن در داده ها بدونین که واقعا دنبال چه چیزی هستین.اهداف موردنظر اپلیکیشن تون رو شفاف کنین، و زمان رو برای معیارهای کم اهمیت از دست ندین. سعی کنین فقط روی نکات کلیدی تمرکز کنین که شما رو در رسیدن به اهداف تون هدایت میکنه.منابع:https://themanifest.com/mobile-apps/14-key-app-metrics-you-need-track-your-mobile-app UX Unicorn Negin Alizadeh Tue, 26 May 2020 23:26:53 +0430