فلو رابط کاربری نیز به نسبت صفحه های یک رابط کاربری خوب با اهمیت هستند. کاربران از ناکجا به محصول وارد نمی شوند. اقدامات و عمل های خاصی مشتری را به محصول هدایت می کند تا هدفی که دارند به سرانجام برسانند.
در حین فرآیند طراحی، فلو ها در برقراری ارتباط نقش مهم و دشواری را دارند. ترسیم و نوشتن هر مرحله از فلوها بخشی زمانبر است. و فلو ها از زمان ترسیم تا رسیدن به صفحه طراحی تغییراتی زیادی خواهند کرد.
از طرفی، فلوهای نوشته شده در قالب داستان و یا پارگراف های متعدد، سخت قابل تحلیل می شوند و به آسانی به چک لیست به طراحی تبدیل نمی شوند.
فلو ها از تعاملات تکی ساخته می شود. یک صفحه در یک محصول، ویژگی و پیشنهادات زیادی را نمایش می دهد که کاربر یکی از آنها را انتخاب می کند. سپس تعاملی و عملی انجام می شود و صفحه تغییر می کند.
این مانند یک مکالمه در حال انجام است. هر لحظه از یک فلو مانند یک سکه با هر دو طرفش است.
در یک طرف، صفحه چیزی را به کاربر نمایش می دهد و در طرف دیگر کاربر عملی را انجام می دهد.
در شکل زیر، یک مثال برای نمایش این فلو دو طرفه را نمایش می دهد.
در بالای خط تیره، چیزی است که کاربر می بیند و در قسمت پایینی خط تیره عملی است که کاربر انجام می دهد. فلش نیز عمل کاربر را به صفحه جدید ربط می دهد.
در اینجا نیز یک مثال از یک محصول را برای فلو بالا نشان می دهیم. این محصول Basecamp برای مدیریت کارهای رزومره to-do است. برای اضافه کردن یک آیتم جدید، در ابتدا کاربر وارد لیست می شود و بر روی *اضافه کردن آیتم جدید* کلیک می کند. فرم اضافه کردن آیتم نمایش داده می شود. کاربر فرم را پر می کند و ثبت می کند. در صورتی که ثبت آیتم معتبر باشد، به عنوان یک آیتم جدید با رنگ زرد در اول لیست نمایش داده می شود:
این روش از ترسیم و نگارش برای فلو Shorthand است. برای ترسیم سریع فلو و همچنین مشورت در تیم برای قبل از طراحی رابط کاربری UI است. کمک می کند که در تیم به جمع بندی رسیده شود و هم اینکه تست و آزمایش مجدد برای رو فلو ها انجام شود. برای فلو های پیچیده تر، به خصوص در مورد اپ یا محصول هایی که هنوز بخش ها و مراحل محصول مشخص نیست، این روش Shorthand می تواند برای ترسیم تصورات و تصمیماتی که در تیم انجام می شود کمک کند. در شکل زیر یک مثال دیگر از فلو ثبت نام و ورود قرار دارد:
این فلو ورود و ثبت نام چند زیر مجموعه نیز دارد. خطوط نقطه نقطه چند عمل رایج را از طرف کاربر را نشان می دهد. تنها یک صفحه ورود به سیستم وجود دارد، اما در آن صفحه چندین عمل امکان وجود دارد.خطوط نقطه نقطه در بالای هر عمل اضافی ظاهر می شود. از آن به عنوان "یا" فکر کنید.
هنگامی که اقدامات چندگانه وجود دارد، فلش از عمل به یک صفحه جدید منتقل می کند. صفحه نمایش هایی که در آن اقدامات احتمالی بی علاقه هستند یا خارج از محدوده هستند و به هیچ وجه در زیر آنها خط قرارندارد. مانند صفحه "داشبورد" در شکل بالا.شما همچنین متوجه می شوید که دو فلش از «ارسال ایمیل مطابق با یک حساب کاربری» در زیر «صفحه نمایش رمز عبور فراموش شده» وجود دارد. دلیل این است که دو صفحه نمایش مختلف از این عمل نتیجه می گیرند!
شما می توانید از فلش های متعدد از یک عمل به عنوان "و" استفاده کنید. صفحه ورود به سیستم با "ایمیل شما فرستاده شد" پیام نتیجه این عمل است، و "ایمیل رمز عبور فراموش شده" یکی دیگر از نتیجه است.
فراموش نکنید که روش و نمونه های مختلفی برای ترسیم فلو در تجربه کاربری و رابط کاربری وجود دارد. و
بعضا این نمودارهای ترسیم شده به کار نمی آید. کار معنی دار کار است که به طور مستقیم بر کاربران ما در قالب صفحه هایی که می توانند آنها را ببینند، تاثیر بگذارد.
این Shorthand کمک می کند در فلو هایی در ذهن طراحان تجربه کاربری و رابط کاربری وجود دارد ترسیم شود و از خارج شود تا بتوان به مراحل دیگر محصول فکر و طراحی کرد.
امیدوارم این مطلب برای شما نیز مفید بود.
