طراحی UI و طراحی UX دوتا از اصطلاحاتی هستن که اغلب در طراحی وب و برنامه اشتباه گرفته میشن و البته خیلی هم مهم هستن، قاعدتاً اونها در یک اصطلاح، کنار هم قرار میگیرن و از جنبه‌ای دیده میشن که انگار هر دوی اونها یه چیز مشابه رو توصیف میکنه. درسته که پیدا کردن یه توصیف جامع برای طراحی کاربری UI کار سختیه ولی وقتی با کاربرد اون بشین میتونین خیلی راحت‌تر اون رو در ذهنتون توصیف کنین و متوجه تفاوتش با UX بشین، البته موضوع اصلی پست امروز ما الگوهای UI هست نه تعریف این نوع طراحی، اما برای شروع بد نیست یکم به عقب برگردیم و ببینیم که این طراحی چی بود و چیکار میکرد!
اما شما در پایان مقاله علاوه بر این که میدونین طراحی کاربری چیه، با انواع الگوهای رایج طراحی UI آشنا میشین و میتونین از اونها در محصولات خودتون استفاده کنین و بهترین بازدهی رو داشته باشین.
طراحی UI چیست؟
قبل از این که با انواع الگوهای رایج طراحی کاربری آشنا بشین بهتره ببینیم اصلاً رابط کاربری چیه!
“UI” در طراحی UI مخفف “User Interface” یا همون طراحی رابط کاربری خودمونه. رابط کاربر طرح گرافیکی یه برنامه است. این طرح شامل دکمه‌هاییه که کاربران روی اون کلیک میکنن، متنی که میخونن، تصاویر، اسلایدرها، قسمت‌های ورود متن و سایر مواردی که کاربر با اونها ارتباط برقرار میکنه. همچنین میشه گفت شامل طرح روی صفحه، انتقال، انیمیشن‌های رابط و هر یک از تعاملات خیلی ریز است. هر نوع عنصر بصری، تعامل یا انیمیشن همه این موارد باید طراحی بشن.
این شغل به عهده طراحان رابط کاربری است. اونها تصمیم میگیرن که برنامه به چه شکلی باشه. اونها باید طرح‌های رنگی و شکل دکمه‌ها، عرض خطوط و قلم‌های مورد استفاده برای متن رو انتخاب کنن. طراحان UI ظاهر و احساس رابط کاربری برنامه رو ایجاد میکنن.
طراحان UI طراحان گرافیک هستن. اونها نگران زیبایی شناسی هستن و این دغدغه‌شونه. اطمینان از این که رابط کاربری برنامه جذاب، چشم‌گیر و موضوعی متناسب با هدف یا یا شخصیت برنامه داره، به خود اونها بستگی داره و براشون واقعاً مهمه. اونها باید مطمئن بشن که تک تک عناصر بصری چه از نظر زیبایی شناسی و چه از نظر هدف، متحد و هماهنگ با هم عمل میکنن.
الگوهای UI
ما اخیراً رقبای خودمون رو در مورد برنامه‌های برتر و تجارت الکترونیکی تجزیه و تحلیل کردیم. ماTarget ، Nike ، Apple ، Samsung ، Ebay ، Chewy ، Banggood ، Drop و Best Buy رو مورد بررسی قرار دادیم، حالا چرا؟ برای این که ببینیم از چه الگوهای رابط کاربری برای پیش برد اهداف خودشون استفاده میکنن و اونها رو برای شما جمع آوری کنیم.
در اینجا 7 الگوی اصلی UI وجود داره که به نظر ما و طبق تحقیقاتی که انجام دادیم، محبوب‌ترین و رایج‌ترین الگوهاییه که وجود دارن.
1. Sign-in انعطاف پذیر
یکی از اولین الگوهای رایج طراحی UI اینه که یه Sing-in خیلی انعطاف پذیر داشته باشین! چون که ورود به سیستم اغلب اولین مانع برای کاربرانه که باعث میشه اونها برای انجام فلان کار تلاش کنن. برای کاهش اصطکاک برای کاربرانی که دفعه اولشونه وارد سستم شما میشن یه Sign-in انعطاف پذیر طراحی کنین!
Lazy Sign-in رو امتحان کنین، در این پترن، ورود به سیستم اختیاری است تا زمانی که در سفر مشتری به سبد خرید یا سایر ویژگی‌ها برسین. با این کار کاربران میتونن یک برنامه رو به عنوان مهمان امتحان کنن و حتی قبل از ایجاد حساب کاربری، ارزش استفاده از اون رو تجربه کنن (Levi، 2016).
همچنین، سایر گزینه‌های ورود به سیستم رو از طریق حساب‌های خارجی (به عنوان مثال Facebook، Google) در نظر بگیرین. با این کار کاربران میتونن از پر کردن فرم رد بشن و در عوض فقط با دوتا کلیک ساده وارد سیستم بشن (Levenson).
در صفحه حساب Banggood، به وضوح میبینین که برای دسترسی به «لیست خواسته ها»، «مشاهده شده» و «کوپن»، ورود به سیستم مورد نیاز است. Banggood همچنین شامل گزینه‌های حساب خارجی در ورود به سیستم هم است.
2. جستجو بر اساس: متن، تصویر، صدا، بارکد
من واقعاً معتقدم که دوربین صفحه کلید بعدی خواهد بود. بن سیلبرمن، مدیرعامل Pinterest
اینترنت با یه نوار جستجو مبتنی بر متن آغاز شده، اما روز به روز در حال پیشرفته تا امکان جستجو از روش‌های دیگه‌ای رو هم فراهم کنه. ما ترکیبی از متن و توابع دیگه رو دیدم که برای افزایش تعامل جستجو استفاده میشن.
پس میتونیم بگیم دومین الگو از الگوهای UI اینه که با استفاده از فایل‌های دیگه مثل تصویر، صدا و غیره کار جستجو انجام بشه. از طریق هوش مصنوعی تصویری، جستجوی تصویر، دنیای جدیدی از امکانات رو به روی ما باز میکن. نه تنها میتونین با نشانه‌های تصویری یک محصول رو شناسایی کنین، بلکه جستجوی تصویر به شما امکان میده ایده‌های جدیدی رو بر اساس زمینه تصویر کشف کنید (ویلسون ، 2017). به عنوان مثال، اگه از گل زعفرون عکس بگیرین، نتایج جستجو ممکنه شامل دستور العمل‌های آماده کردن یه دمنوش خوشمزه زعفرون باشه!
اسکن بارکد حاشیه خطا رو کاهش میده و شما رو مستقیماً به سمت یک محصول هدایت میکنه. جستجوی صوتی قابلیت دسترسی رو افزایش می ده و راحتی کاربری رو که مشغول فعالیت دیگه‌ای است، فراهم میکنه.
3. مرور بر اساس: دسته بندی‌های محصول
همراه با جستجوی مستقیم، کاربران برای یافتن چیزهای جدید به فعالیت‌های مرور کردن میپردازن. دسته بندی محصولات به کاربران امکان میده تا محصولات رو به صورت سازمان یافته مرور و کشف کنن (هارلی ، 2018).
اونها با گروه بندی محصولات به روشی بصری برای کاربران، راه یابی رو بهبود می‌بخشن. مثل اینه که وارد یک فروشگاه مواد غذایی بشین و وسایل رو در همون راه‌هایی که انتظار داریم وجود داشته باشن، پیدا کنیم!
با نگاهی به برنامه‌های رقیب، متوجه شدیم که برخی از اونها صفحه جداگانه‌ای برای گروه محصولات دارن. بخش‌های دیگه شامل مثلاً یک قسمت دسته بندی محصولات در صفحه اصلی هستن. برای داشتن یه تجربه لذت بخش در مرور، ترکیب تصاویر یا آیکون‌ها با برچسب‌های دسته بندی رو در نظر بگیرین، پس به این طریق شما با یکی دیگه از الگوهای رایج UI آشنا شدین.
در زیر، روش‌های مختلفی رو که هر برنامه با نمایش دسته بندی محصولات داره، خواهید دید.
4. تنوع و انسجام کارت
کارت‌ها اولین عناصر رابط کاربر هستن که کاربران با اونها ارتباط برقرار میکنن. پس به این ترتیب تنوع و سازگاری کارت به ایجاد اولین تأثیر قوی در برنامه شما کمک خیلی زیادی میکنه.
سعی کنین انواع مختلفی از کارت‌ها رو برای انواع مختلفی از اطلاعات ایجاد کنین. این کار اطلاعات رو از نظر بصری جدا میکنه و به کاربران در یادگیری زبان بصری کمک میکنه. بدون داشتن تنوع، خیلی سخته که با یه نگاه بگین فلان کارت چه چیزی رو نشون میده، چون که همه اونها یکسان هستن، پس الگوهای رایج طراحی UI در این قسمت شامل طراحی کارت‌هاییه که به کاربران کمک میکنه از نظر بصری دسته بندی رو تشخیص بدن.
همچنین روی سازگاری کارت‌ها در هر صفحه کار کنین و وقت بذارین. اگه برای فلان اطلاعات خاص یه نوع کارت دارین، سعی کنین اون رو در کل ثابت نگه دارین تا قابل شناسایی باشه؛ یعنی مثلاً اگه برای محصولات تخفیف خورده در سایت یا اپ خودتون از یه کارت با طرح خاصی استفاده میکنین، لازم نیست هر فصل اون رو تغییر بدین، بلکه بهتره ثابت بمونه تا چشم مشتری عادت کنه و دیگه بدونه که این کارت برای محصولات اف خورده است.
فروشگاه اپل در کارت‌های خودش از تنوع و سازگاری استفاده میکنه و با این کار واژگان تصویری واضحی ایجاد میکنه.
5. CTA های مختلف برای مراحل مختلف کاربری
پنجمین پیشنهاد ما برای استفاده از الگوهای طراحی رابط کاربری اینه که به CTA دقت کنین! ما دقت کردیم و دیدیم این که چندتا دکمه CTA تو یه اپ باشه، کار رایجیه. در واقع داشتن 2-3 دکمه CTA میتونه مراحل مختلف کاربر رو در سفر مشتری پوشش بده و اصلاً نباید دست کم گرفته بشه.
به عنوان مثال ، Ebay دارای دکمه‌های «ذخیره»، «افزودن به سبد خرید» و «خرید اکنون» در ردیف‌های متوالی است. «اکنون بخر» برای زمانی که میخواین بلافاصله یک مورد خاص رو بخرین بسیار مناسبه. با این وجود، هنگامی که منتظر فروش یا مقایسه محصولات هستین، دکمه «ذخیره» بهترین گزینه است. «افزودن به سبد خرید» برای وقتی که شما تصمیم به خرید گرفتین و چندتا کالا رو انتخاب میکنین کاربرد داره.
اصل حرف ما اینه که مثلاً داشتن تنها یه دکمه «اکنون بخرید» برای کاربری که کاملاً آماده خرید نیست، ممکنه به تفاوت رفتار خرید وی اشاره نکنه. اصلاً این مورد میتونه کاربران رو از خرید کردن در اپ شما و یا همون جستجو یا مقایسه محصولات هم باز داره پس حواستون رو جمع کنین.
6. زبانه های بالای صفحه برای محصولی خاص
صفحات خاص محصول میتونن بسیار طولانی بشن، این مورد معمولاً به این دلیل اتفاق میافته که ما سعی می‌کنیم تمام جزئیات مورد نیاز برای تصمیم گیری برای خرید رو در اون قرار بدیم.
بر اساس مطالعات نیلسن، در اینجا لیستی از ویژگی‌های برتر صفحه محصول وجود داره:
موارد ضروری که باید وجود داشته باشن: نام محصول، تصاویر، قیمت، گزینه‌ها، در دسترس بودن یا نبودن، افزودن به سبد خرید، توضیحات
چیزهای خوبی که میتونن وجود داشته باشن: رتبه بندی یا بررسی، تصاویر اضافی، فیلم‌ها، بزرگنمایی / تغییر اندازه، توصیه‌های مربوطه، لیست خواسته‌ها
داشتن یه Tab در بالای صفحه یکی از روش‌های کمک به کاربران و یکی از الگوهای UI برای یافتن هر چه سریع‌تر موضوع مورد علاقه است. اونها حتی قبل از شروع پیمایش کاربران به پایین، محتوای صفحه رو فاش میکنن و باعث میشن، کاربر بدونه قراره تو این صفحه چه مواردی رو ببینه.
این تب‌ها یا زبانه‌ها باید حاوی محتوای مرتبط در همون سطح سلسله مراتب باشن. راستی یادتون نره که زبانه ها نیز مقیاس پذیر هستن. پس میتونین کار خودتون رو با زبانه‌های ثابت شروع کنین و به مرور موضوعات مرتبط و مورد نظر خودتون رو اضافه میکنین (Material Design) که البته قابل پیمایش هم هستن.
در اینجا، Samsung Shop و Chewy از زبانه‌های ثابت استفاده میکنن، در حالی که Drop از یه زبانه قابل پیمایش استفاده میکنه.
7. پرداخت با افشای تدریجی
خب خب و اینجا میرسیم به آخرین الگو از الگوهای UI که پرداخت با افشای تدریجی یا Checkout with progressive disclosure است! آیا این اسم برای شما آشناست؟ معنی اون رو میدونین؟ بهتره بدونین که افشای تدریجی در مورد نشون دادن مقدار مناسبی از اطلاعات است. یعنی با تجزیه اطلاعات در چندین صفحه در حالی که موضوعات اصلی رو فاش میکنین، پیچیدگی رو کاهش میدین، یعنی یه لقمه خیلی بزرگ غذا رو ریز ریز میکنین و آروم آروم میذارین تو دهن بچه!
بدون این کار، کاربران ممکنه عملیات پرداخت رو خسته کننده بدونن و حتی کارت رو رها کنن و بیخیال خرید بشن. مواجه شدن با دیواری از فرم‌هایی که باید پر بشن، احساس خستگی به آدم منتقل میکنه (کمپبل ، 2017). با این وجود، مشاهده فرم‌های مشابهی که به مراحل مختلفی گروه بندی شده، خیلی بهتر و دوست داشتنی‌تره. همچنین بخاطر داشته باشین که به فضای صفحه کلید در نیمه پایین صفحه نیاز خواهید داشت.
چند راه برای سازماندهی این پیچیدگی با آکاردئون، لیست یا شاخص پیشرفت است. آکاردئون به صورت عمودی منبسط میشه، در حالی که لیستی به صفحه دیگه باز میشه تا اطلاعات بیشتری رو به شما نشون بده. یک نشانگر پیشرفت هم نشون میده که کاربر در مراحل متوالی یک پرداخت قرار داره.
به نظر میرسه نایک از لیست‌های آکاردئون، Chewy و Target استفاده میکنه، در حالی که Drop از یک نشانگر پیشرفت در صندوق‌های خودش استفاده میکنه.
برای پرداخت Nike دارای آکاردئون با “+” ، Chewy و Target دارای لیست‌هایی با دکمه‌های “Add” است و Drop دارای یه شاخص پیشرفت است.
این شما و این الگوهای رابط کاربری
از مطالعه برنامه‌های فعلی میتونین چیزهای زیادی یاد بگیرین. با مشاهده دلیل تصمیمات مربوط به طراحی محصول، میتونیم بینش جدیدی پیدا کنیم. با متناسب بودن الگوهای UI ، از بارگیری برنامه تا پرداخت، یک تجربه یکپارچه رو برای کاربران خودتون ایجاد کنین و اجازه بدین تا از هر مرحله از سفر مشتری خودشون در سایت یا اپ شما لذت ببرن.
