چگونه از رابط کاربری اپلیکیشن موبایل الهام بگیریم و آن را به شرح طراحی تبدیل کنیم
روندی کاربردی برای گردآوری نمونه‌های رابط کاربری موبایل، بررسی توالی کامل صفحه‌ها و تبدیل مشاهدات بصری به شرح طراحی اصیل و آزمون‌پذیر.
جمع کردن پوشه‌ای پُر از صفحه‌های جذاب اپلیکیشن آسان است، اما استفاده از آن سخت. بدون پرسشی برای هدایت جست‌وجو، نمونه‌های بصری می‌توانند طراحی را به تقلید بکشانند و کار واقعی کاربر را حل‌نشده بگذارند.
از تصاویر صفحه به‌عنوان سرنخ بررسی استفاده کنید. فرایند مفید از کار شروع می‌کند، جریان‌های کامل را مقایسه می‌کند، تصمیم‌های پشت ظاهر را ثبت می‌کند و آن مشاهدات را به شرحی تبدیل می‌کند که بتوانید نمونه اولیه‌اش را بسازید و ارزیابی کنید.
نکته‌های کلیدی
- پیش از گردآوری نمونه‌ها، کاربر، کار و ابهام طراحی را تعریف کنید.
- توالی صفحه‌ها و وضعیت‌های تعامل را بررسی کنید، نه جلوه‌های بصری جداافتاده را.
- اصول قابل‌انتقال را بنویسید، سپس برای محصول خود تصمیم‌های اصیل بگیرید و آن‌ها را با افراد بیازمایید.
- تا وقتی شرح طراحی انعطاف‌پذیر است، دسترس‌پذیری و تناسب با پلتفرم را بررسی کنید.
۱. از یک پرسش طراحی شروع کنید
پیش از مرور نمونه‌ها، یک جمله درباره فرد و لحظه‌ای که برایش طراحی می‌کنید بنویسید. برای مثال: «آشپز خانگی تازه‌کار باید غذایی برای شب کاری انتخاب کند و بداند بعد چه کند.» سپس ابهام را نام ببرید: بخش دشوار، مرور گزینه‌هاست، اعتماد به پیشنهاد است یا شروع دستور پخت چندمرحله‌ای؟
این پرسش مرزهای جست‌وجو را تعیین می‌کند. مشخص کنید کدام پلتفرم، بخش محصول و کار مهم است. اگر تجربه استفاده نخست را بررسی می‌کنید، نمونه‌های آشنایی اولیه را ببینید؛ اگر مشکل انتخاب طرح است، صفحه‌های پرداخت را ببینید؛ برای ورود داده، الگوهای فرم را مقایسه کنید. ScreenKits امکان مرور صفحه‌های واقعی اپلیکیشن بر پایه دسته را می‌دهد. اپلیکیشن‌های مفید را به‌صورت نشانک مرورگر ذخیره کنید تا هنگام جمع‌بندی دوباره به صفحه‌هایشان برگردید.
- فرد موردنظر کیست و می‌خواهد به چه چیزی برسد؟
- کدام تصمیم طراحی نامطمئن است: سلسله‌مراتب، توالی، ناوبری، محتوا یا بازخورد؟
- کدام محدودیت‌ها مهم‌اند، مانند پلتفرم، دسترس‌پذیری، اندازه دستگاه یا قواعد کسب‌وکار؟
۲. مجموعه نمونه کوچک و هدفمند گرد آورید
چند نمونه گرد آورید که به همان کار یا کاری بسیار نزدیک می‌پردازند. بیش از یک رویکرد بگنجانید: مسیر مستقیم، مسیر هدایت‌شده و شاید نسخه‌ای که با خطا یا حالت خالی برخورد می‌کند. برای هر گزینه، اپلیکیشن را ذخیره و صفحه یا لحظه‌ای را که می‌خواهید بازبینی کنید یادداشت کنید. مجموعه جمع‌وجور مقایسه را از تابلوی الهام بی‌فیلتر آسان‌تر می‌کند.
وقتی مشکل زیربنایی مشترک است، دسته‌های مختلف را هم ببینید. اپلیکیشن زمان‌بندی و اپلیکیشن خرید مواد غذایی هر دو شاید لازم باشد به فرد در انتخاب تاریخ و تأیید تغییر کمک کنند. ارتباط مفید ساختار تصمیم است، نه ظاهر سطحی. مخاطب یا صنعت مشابه را گواه حل مشکل خاص خودتان توسط آن رابط ندانید.
- نمونه‌ها را به دلیلی انتخاب کنید که بتوانید بیان کنید، مانند «نشان می‌دهد انتخاب یک گزینه چگونه خلاصه را تغییر می‌دهد».
- راه‌حل‌های متفاوت بگنجانید تا نخستین نمونه آراسته، پاسخ پیش‌فرض نشود.
- با نشانک‌های مرورگر، اپلیکیشن‌های منتخب را هنگام نوشتن شرح طراحی برای مقایسه در دسترس نگه دارید.
۳. جریان را بخوانید، نه فقط تصویر صفحه را
صفحه جداافتاده چیدمان، رنگ، متن و کنترل‌ها را در یک لحظه نشان می‌دهد. نمی‌گوید چه چیزی به آن منتهی شده، پس از لمس چه رخ می‌دهد یا آیا کار موفق می‌شود. صفحه‌های مرتبط را به‌ترتیب دنبال کنید. نقطه ورود، تصمیم، اقدام، بازخورد و وضعیت بعدی را یادداشت کنید. وقتی بر کار اثر دارند، جایگزین‌هایی مانند خطای اعتبارسنجی، بستن و بازگشت برای ویرایش انتخاب را هم بگنجانید.
مشاهده را از تفسیر جدا کنید. «اقدام اصلی در سه مرحله نزدیک پایین می‌ماند» مشاهده است؛ «پس حتماً استفاده از آن آسان‌تر است» ادعایی است که ثابت نکرده‌اید. تصویر صفحه می‌تواند فرضیه بسازد، اما گواه کاربردپذیری نیست. NN/g نمونه‌سازی و آزمون کاربر را راه‌هایی برای یافتن مشکلات احتمالی کاربردپذیری و یادگیری نحوه تعامل افراد با رابط پیشنهادی می‌داند.
| ثبت کنید | نمونه از جریان انتخاب دستور غذا |
|---|---|
| هدف کاربر | انتخاب دستور شام متناسب با وقت امشب. |
| الگوی مشاهده‌شده | فیلترهای زمان و رژیم غذایی پیش از فهرست دستورها ظاهر می‌شوند. |
| اصل احتمالی | محدودیت‌های پراهمیت را پیش از مرور نتیجه‌ها نشان دهید. |
| پرسش باز | آیا افراد می‌دانند کدام فیلترها اختیاری‌اند؟ |
| تصمیم محصول | دو فیلتر ضروری را نشان دهید و گزینه‌های بیشتر را در صورت درخواست در دسترس بگذارید. |
۴. مشاهدات را به شرح طراحی اصیل تبدیل کنید
جمع‌بندی جایی است که نمونه‌ها مفید می‌شوند. اصلی قابل‌انتقال مانند «پیامد انتخاب را پیش از تأیید نمایان کنید» بیرون بکشید. سپس بر پایه کار، محتوا و محدودیت‌های محصولتان تصمیم بگیرید آن اصل چگونه اجرا شود. تصویر برنددار، عبارت دقیق یا چیدمان متمایز را فقط چون در نمونه‌ای جذاب دیده‌اید کپی نکنید.
در نمونه دستور غذا، مجموعه نمونه‌ها شاید پیشنهاد کند زمان زود نمایش داده شود و تغییر ناشی از فیلتر انتخاب‌شده پیش‌نمایش داشته باشد. شرح طراحی اصیل می‌تواند مسیر کوتاه برنامه‌ریزی شام، محدودیت زمانی نمایان، وضعیت‌های روشن فیلتر و مرحله بازبینی پیش از ذخیره را مشخص کند. این تصمیم‌ها به هدف محصول پاسخ می‌دهند؛ صفحه اپلیکیشن دیگری را بازسازی نمی‌کنند.
- مخاطب و زمینه: چه کسی به این نیاز دارد و کجا یا چه زمانی از آن استفاده می‌کند؟
- هدف و موفقیت کاربر: چه چیزی را باید بتواند تمام کند یا بفهمد؟
- جریان: مراحل اصلی، تصمیم‌ها و وضعیت‌های جایگزین مهم کدام‌اند؟
- اصول طراحی: رابط باید چه چیزی را روشن یا آسان کند؟
- محدودیت‌ها و پرسش‌های باز: چه چیزی باید برقرار باشد و چه چیزی پژوهش می‌خواهد؟
- برنامه ارزیابی: چه کاری به فردی با نمونه اولیه می‌دهید و چه چیزی را مشاهده می‌کنید؟
۵. نمونه اولیه بسازید، دسترس‌پذیری را بررسی و طراحی را اصلاح کنید
پیش از پرداختن به ظاهر، شرح طراحی را به طرح خام جریان صفحه‌ها تبدیل کنید. تصمیم اصلی و بازخورد آن را نمونه‌سازی کنید، سپس از فردی نماینده مخاطب بخواهید کاری واقع‌گرایانه انجام دهد. مکث‌ها، انتخاب‌های غیرمنتظره و خطاها را مشاهده کنید. جریان را اصلاح و آزمون را تکرار کنید؛ راهنمای پژوهشی NN/g طراحی تکرارشونده و ارزیابی نمونه اولیه را بخشی از یادگیری می‌داند، نه اینکه پیش‌نویس نخست را نهایی فرض کند.
هم‌زمان دسترس‌پذیری را بررسی کنید. راهنمای رابط انسانی Apple بر تعامل‌های قابل‌درک و سازگارشونده و توجه به روش‌های مختلف ورودی تأکید دارد. تغییر اندازه متن، کنتراست، اندازه و فاصله کنترل‌ها، برچسب‌های روشن و وابسته نبودن معنی به رنگ را بررسی کنید. همچنین ببینید جریان با متن طولانی‌تر سازگار می‌شود و با فناوری کمکی فهمیده می‌شود یا نه. راهنمای دسترس‌پذیری Material Design نیز برای محصولی پیرو قراردادهای Android همراه خوبی است.
- به‌جای تور رابط، یک کار بدهید و ببینید آیا افراد می‌توانند پیش بروند.
- نسخه زودهنگام و کم‌جزئیات را زمانی بیازمایید که تغییر ساختار هنوز آسان است.
- راهنمای پلتفرم مرتبط با دستگاه و نظام طراحی پشتیبانی‌شده را بررسی کنید.
- فقط برای بررسی یک پرسش به نمونه‌ها برگردید؛ شباهت ظاهری را جای شواهد نگذارید.
فهرست بازبینی از نمونه تا شرح طراحی
پیش از تحویل شرح طراحی، مطمئن شوید تصمیم محصول را توصیف می‌کند، نه تابلوی حال‌وهوا را. کسی که نمونه‌ها را گرد نیاورده باید بتواند کار موردنظر، جریان پیشنهادی، انتخاب‌های هنوز حل‌نشده و برنامه تیم برای سنجیدن عملکرد طراحی را بفهمد.
- کاربر و کار اصلی صریح‌اند.
- هر نمونه یادداشتی دارد که توضیح می‌دهد به بررسی کدام پرسش یا الگو کمک می‌کند.
- مشاهدات از فرض‌ها و ادعاهای کاربردپذیری جدا شده‌اند.
- شرح طراحی جریانی اصیل و دلیلی ویژه محصول را شرح می‌دهد.
- دسترس‌پذیری، رفتار پلتفرم و وضعیت‌های جایگزین مهم گنجانده شده‌اند.
- کار نمونه اولیه و برنامه بازبینی مبتنی بر مشاهده تعریف شده‌اند.
