طراحی UI/UX

UX تصمیم می گیرد که یک محصول چگونه کار کند. UI تصمیم می گیرد که این تصمیم چگونه به نظر می رسد. هیچکدام به تنهایی کافی نیست - یکی شفافیت دارد و دیگری اعتماد دارد.

مطالعه موردی

حمل 13 دامنه روی یک صفحه

آنچه را که موعظه می کنیم در محصول خودمان به عمل می آوریم. dmu ONE 13 حوزه تجاری - امور مالی، فروش، CRM، پروژه‌ها، عملیات، موجودی، تدارکات، منابع انسانی، بازاریابی، گزارش‌دهی، آرشیو و تنظیمات - و 67 عملکرد را در یک جریان تلفن همراه گرد هم می‌آورد. تصویر واقعی زیر نشان می دهد که چگونه این ساده سازی در رابط انجام می شود.

صفحه اصلی برنامه dmu ONE در تلفن Android
  • ناوبری13 دامنه، نه در یک منوی پایینی - سازماندهی شده در سلسله مراتبی که بیشترین موارد استفاده را اولویت بندی می کند.
  • سلسله مراتب اطلاعاتعملیات روزانه در بالای صفحه قرار دارد. گزارش و تنظیمات یک لایه عقب می‌نشینند.
  • کنتراسترنگ تاکیدی فقط در جایی ظاهر می شود که نیاز به اقدام باشد. بقیه رابط ساکت می ماند.

01

دو رشته مختلف، یک تجربه.

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

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

02

ساختار اول، صفحه نمایش در مرحله دوم.

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

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

03

سازگاری از یک سیستم ناشی می شود، نه صفحه نمایش های فردی.

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

به همین دلیل است که کار با رابط کاربری بالغ یک کتابخانه مؤلفه ایجاد می کند، نه صفحه های جداگانه: کارت های قابل استفاده مجدد، فیلدهای فرم، نشان ها، قوانین فاصله. پشتیبانی از تم روشن/تاریک در رابط‌های خود DMU نیز نتیجه این رویکرد سیستماتیک است - مجموعه‌ای از اجزای واحد که در دو شرایط مختلف نوری ثابت می‌ماند.

04

قابلیت دسترسی لایه‌ای نیست که بعداً اضافه شود.

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

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

05

فرآیند اثبات است نه ادعا.

متحد کردن 13 حوزه تجاری و 67 عملکرد در یک برنامه تلفن همراه، یک تمرین تئوری UX نبود - یک مشکل واقعی بود که به تحقیق، معماری اطلاعات، نمونه‌سازی اولیه، آزمایش قابلیت استفاده و تکرار مکرر نیاز داشت. dmu ONE خروجی آن فرآیند است، و صادقانه ترین راه برای توصیف رویکرد UI/UX DMU، نشان دادن مستقیم آن است.

توسعه اپلیکیشن موبایل: برنامه های موبایل سفارشی که با تعداد ماژول شما مقیاس می شوند