اطلاعافزارِ (Artifact) چرخشِ کاربر (User Flow) [یا فلوچارت تجربهٔ کاربر UX Flowchart یا جریان تعاملات Interaction Flow)] یکی از مفیدترین و در عین حال کمدرکشدهترین ابزارهای موجود در صنعت تجربه کاربری (UX) هستند. اغلب طراحان ارشد از آنها اجتناب میکنند و طراحان مبتدی هم ممکن است برای درک و استفاده از آنها دچار مشکل شوند.
عناوین اصلی مقاله
در واقعیت، فلوهای کاربر نباید آنقدر هم دشوار و پیچیده باشند. در این مقاله، ما شفافیت بیشتری به دنیای پیچیدهٔ فلوهای کاربر میآوریم و یک راهنمای گامبهگام برای ساخت یک فلو کاربر ارائه میکنیم.
۱. کاربر خود را بشناسید
برای طراحی بهترین فلو کاربر، ابتدا باید درک عمیقی از کاربر خود داشته باشید. فهمیدن نیازها و انگیزههای کاربر باعث میشود در تصمیمگیری جهت ایجاد تجربهای روان و شبیه به «flow» هنگام تعامل با محصول، مسیر درستی را انتخاب کنید. در اینجا چند سوال وجود دارد که هنگام شناخت کاربر میتوانید از خودتان بپرسید:
- نیازهای کاربران چیست؟
- چه مشکلاتی را میخواهند حل کنند؟
- چه ویژگیهایی برایشان مهمتر است و چرا؟
- سوالات اولیهٔ آنها دربارهٔ محصول چیست؟
- برای اینکه بهراحتی با محصول تعامل کنند، چه اطلاعاتی باید در اختیارشان قرار گیرد؟
همهٔ مسیرهایی که کاربر میتواند در سایت یا اپ دنبال کند را در نظر بگیرید تا بتوانید مسیرهای کلیدی را شناسایی کنید. معمولاً این مسیرها سادهترین و سرراستترین راهها هستند. اطلاعات اولیهای که ممکن است نیاز باشد، مثلاً وارد کردن ایمیل یا نام کاربری بهجای شماره تلفن، را پیشبینی کنید. به پرسشهایی مثل «آیا این ویژگی واقعاً ضروری است؟» فکر کنید. شناسایی این مسیرهای کلیدی، کار شما را در ساخت فلو کاربر بسیار آسانتر خواهد کرد.
۲. چگونه یک طرح کلی (Outline) از فلو کاربر بسازیم
مانند اکثر کارها در طراحی، بهترین کار برای درک نحوهٔ ایجاد فلو کاربر، شروع با یک پیشنویس یا طرح کلی است. یک جریان ساده را بهصورت نقشهٔ ذهنی (Mind Map) روی کاغذ بیاورید. هر باکسی که رسم میکنید باید نشاندهندهٔ یک مرحله در اکشن کاربر باشد. برای کمک به ساخت و شکستن فلو کاربر به سه مرحلهٔ اصلی فکر کنید: نقطهٔ ورود، مراحل تا تکمیل کار، و مرحلهٔ نهایی تکمیل تسک یا تعامل.
۱. نقطهٔ ورود (Entry point)
نقاط ورود همان مسیرهایی هستند که کاربر برای اولین بار از طریق آنها وارد محصول میشود. در وبسایتها، معمولاً نقاط ورودی متعدد هستند؛ در حالی که اپلیکیشنها معمولاً نقاط ورود محدودی دارند. برای مثال، بازدید از وبسایت میتواند از طریق جستجوی گوگل یا کلیک روی تبلیغات محصول و لینکهای بهاشتراکگذاشتهشده باشد. در حالی که ورود به اپلیکیشنها اغلب از طریق اپاستور یا نسخهای که روی گوشی کاربر نصب شده است، صورت میگیرد. البته برای اپلیکیشنها نیز ممکن است از طریق لینکها، مقالات یا تبلیغات وارد شد.
۲. مراحل تا تکمیل کار (Steps to completion)
این بخش، اصلیترین قسمت در نمودار فلو محسوب میشود. «مراحل تا تکمیل کار» معمولاً شامل صفحات و یا تعاملات در وباپلیکشنها یا اپلیکیشنهای تلفنهای هوشمند است. «مراحل» در وباپلیکشنها گامهای یک Interaction در محدودهٔ یک تسک کاربری یا هدف خاص است. مثلا گامهای «پر کردن فرم ثبتنام» یا «تنظیم زمان هشدار» یا بسته به اینکه زیرگامهای چقدر باید ریز شوند: «پر کردن تکستباکس نام کاربری» یا «انتخاب زمان از تقویم».
ممکن است «مراحل تا تکمیل کار» برای نمایش صفحات وبسایتها استفاده میشود مانند ورود یا ثبتنام، آنبوردینگ (Onboarding)، صفحهٔ اصلی (Home Screen) و هر صفحهای است که برای تکمیل یک تسک لازم است.
«مراحل تا تکمیل کار» از اشکال مختلفی مانند مستطیلها (نمایشگر یک صفحه یا گامهای یک تعامل)، لوزی تصمیمگیری، دایره برای نشان دادن یک فعالیت یا وظیفه کاربری (یا بسته به بافتار محصول زیروَظیفه یا Subtask) تشکیل شده است.
به یاد داشته باشید که آن را ساده نگه دارید و مطمئن شوید هر مرحله واقعاً برای انجام آن کار ضروری است. پیشنویس اول شما لازم نیست همهٔ جنبههای پلتفرم را در بر بگیرد؛ مثلاً لازم نیست در همین مرحله تمام مراحل بازیابی گذرواژه را لیست کنید. روی مراحلی تمرکز کنید که کاربر برای رسیدن به هدف اصلیاش واقعاً نیاز دارد.
۳. تعامل نهایی (Final interaction)
تعامل نهایی، آخرین صفحهای است که کاربر بعد از انجام تسک مورد نظر خواهد دید. این صفحه به کاربر اطلاع میدهد که تسک به پایان رسیده است. مثالی از یک تعامل نهایی در خرید کالا میتواند نمایش صفحههٔ تأیید سفارش باشد که به شما اعلام میکند سفارش ثبت شده است. مثال دیگری از تعامل نهایی زمانی است که کاربر فرآیند ثبتنام را کامل میکند. بعد از ثبتنام، آیا بهتر است مستقیماً به صفحهٔ اصلی منتقل شود یا صفحهٔ ورود (Login) بهعنوان مرحلهٔ آخر نمایش داده شود؟
۳. عناصر فلو کاربر را تعریف کنید
طراحان از اشکال و رنگهای مختلفی برای نمایش مجموعهای یکتا از المانهای رابط کاربری استفاده میکنند. هر شکل، بیانگر یک تعامل یا یک امکان بالقوه برای تعامل است و اطلاعات بیشتری در مورد آن مرحله میدهد. بعضی شکلها انعطافپذیرند و میتوان از آنها برای چند منظور استفاده کرد؛ مثلاً دایرهها میتوانند نمادی برای نقاط ورود/خروج یا اتصال به صفحه/صفحهنمایش دیگری باشند. اضافه کردن یک کلید یا راهنما (Key/Legend) به فلو کاربر، به همکاران و مشتریان کمک میکند نمودار را بهتر تفسیر و درک کنند. در زیر رایجترین شکلهای مورد استفاده در صنعت و موارد استفادهشان را معرفی میکنیم:
مستطیل (Rectangle)
مستطیل احتمالاً متداولترین شکل در فلوهای کاربر است. اغلب نمایشگر یک صفحه یا گام یک تعامل با محصول هستند. برخلاف دایره، این شکل نشاندهندهٔ یک اقدام است. بنابراین بهتر است زمانی از مستطیل استفاده کنید که میخواهید چیزی مثل گامهای یک تعامل (Interaction) یا صفحهٔ خاصی از اپ یا وبسایت را نشان دهید.
خطوط همراه با فلش (Lines with arrows)
شاید مهمترین بخش در فلو کاربر همین خطوطی باشند که با فلشها گره خوردهاند، چون این خطوط، شکلهای مختلف را به هم متصل میکنند و جریان (یا چرخش یا Flow) را نشان میدهند. فلشها خواننده را از یک شکل به شکل بعدی هدایت میکنند؛ معمولاً از بالا به پایین یا از چپ به راست.
دایره (Circle)
دایره بیشتر برای نشان دادن یک فعالیت یا تسک کاربری استفاده میشود. این اشکال، وظیفه یا گامی را که باید انجام شود، به نمایش میگذارند. از دایره زمانی استفاده کنید که میخواهید یک فرایند، تسک یا عملیات را نشان دهید. برای اطمینان از صحت استفاده از دایره، برچسب آن را بررسی کنید؛ معمولاً روی دایرهها از یک فعل مانند «انتخاب آیتم» یا «ارسال سفارش» استفاده میشود.
لوزی (Diamonds)
این شکل که اغلب «لوزی تصمیمگیری» (Decision diamond) نامیده میشود، همیشه پرسشی را مطرح میکند. در حالی که سایر شکلها میتوانند برای اهداف متفاوت استفاده شوند، لوزی همیشه زمانی بهکار میرود که یک تصمیم باید گرفته شود. پاسخهای ممکن به سوال مطرحشده، از طریق خطوطی که از لوزی خارج میشوند، مسیرهای مختلف را تعیین میکنند. برای مثال، میتوانید سؤالهایی مثل «آیا حساب کاربری دارید؟» یا «آیا این اطلاعات صحیح است؟» را مطرح کنید و فلشهای «بله» یا «خیر» را از آنها جدا کنید.
نکتهٔ مهم این است که قانون یا دستورالعمل ثابتی برای شیوهٔ ایجاد فلو کاربر وجود ندارد و نمودار یک نفر ممکن است با نمودار فرد دیگر متفاوت باشد. تا زمانی که در استفاده از شکلها ثبات دارید و خواننده میتواند فلو را دنبال کند و بفهمد، در واقع یک فلو کاربر موفق ساختهاید.
۴. طرح کلی خود را اصلاح کنید
همان اصولی که در طراحی رابط کاربری رعایت میکنید، در طراحی یک فلوچارت UX نیز باید رعایت شوند. در اینجا سه اصل مهم طراحی UI را یادآوری میکنیم:
برچسبها را معنادار کنید
برچسبها (Labels) در واقع طناب نجات خواننده هنگام دنبال کردن فلو کاربر هستند. مهمترین برچسب، عنوان فلوچارت است. تلاش کنید عنوانی بگذارید که دقیقاً توضیح دهد این فلو کاربر چه کاری را نشان میدهد. اگر مطمئن نیستید عنوانتان واضح است، از یک همکار بخواهید آن را بخواند؛ اگر نتوانست بگوید این فلو یا چرخش دربارهٔ چیست، بهتر است آن را تغییر دهید. همچنین سعی کنید از تماما با حروف بزرگ (ALL CAPS) نوشتن پرهیز کنید، چرا که تحقیقات نشان میدهد این کار خوانایی را کاهش میدهد.
در انتخاب رنگها دقت کنید
هدف اصلی استفاده از رنگ در یک فلوچارت UX، کمک به خواننده برای تشخیص و گروهبندی منابع و برجسته کردن اقدامات مهم کاربر است. رنگها بهتر است بهعنوان یک سیستم کدگذاری (Coding system) استفاده شوند تا وسیلهای برای زیبایی یا استایل صرف.
ساختار بصری را یکپارچه حفظ کنید
حفظ یکپارچگی در ساختار بصری، کمک میکند فلوی یا چرخش کاربر قابل دنبال کردن باشد و مخاطب را دچار سوءتفاهم نکند. برای مثال، شکلها و خطوط باید همیشه برای همان مقصودی که تعریف کردهاید استفاده شوند و با کلید یا راهنما همراه باشند. علاوه بر این، به چیدمان (Real estate) طرح خود دقت کنید. المانها را روی صفحه بهصورت منطقی و پیوسته قرار دهید تا طرح شلوغ نشود. اغلب ابزارهای طراحی (شامل Figjam) خطکشها و شبکههایی (Rulers & Grids) برای تراز کردن المانها دارند.
۵. پس از ساخت فلو کاربر چه اتفاقی میافتد؟
این بود خلاصهٔ چگونگی ایجاد یک فلو یا چرخش کاربر که نشاندهنده جریان پیوستهٔ تعاملات کاربری است. در UX، فلو کاربر یکی از راههای عالی برای قراردادن خود در جایگاه کاربر و اطمینان از اولویت داشتن نیازهای او در محصول است. از جنبهٔ استراتژیک هم، فلوهای کاربر در ارزیابیهای کاربدرپذیری و هیوریستیکی بسیار کاربرد دارند. ساخت فلوچارت در ابتدای فرآیند طراحی میتواند خطر سوءتفاهم درباره مشخصات طراحی و نیاز به کار مجدد را کاهش دهد. فلوهای کاربر اغلب در کنار سایر تحویلدادنیهای طراحی، به تیم طراحی یا کارفرما ارائه میشوند تا نمایی تصویری از جریان محصول فراهم کنند.
برای تسلط در طراحی تجربه کاربری، هیچ چیز جای تمرین را نمیگیرد. طراحی فلوهای مؤثر زمانبر است و با تکرار و تمرین بهتر میشود. برای تقویت مهارتهای UX خود، میتوانید فلوهای کاربر وبسایتها و اپلیکیشنهای موجود را ترسیم کنید. اگر نمیدانید از کجا شروع کنید، باید یک منتور طراحی محصول داشته باشید تا شما را گام به گام راهنمایی کند.
{مقاله اصلی: How To Create A User Flow: A Step-By-Step Guide}
دیدگاهتان را بنویسید