سپنتا پویا — طراح محصول

سه دستگاه کنار هم با عنوان یک کار، چند دستگاه، که یک رشتهٔ خط‌چین صورتی از راست به چپ آن‌ها را به هم وصل می‌کند. سمت راست یک لپ‌تاپ با سه ردیف نتیجهٔ جست‌وجو که یکی صورتی و انتخاب‌شده است، با برچسب جست‌وجو و مقایسه. وسط یک گوشی با کادر صورتی کد تأیید پنج‌رقمی، با برچسب کد تأیید. سمت چپ گوشی دیگری با یک کد QR، با برچسب نشان دادن بلیت، ایستاده و یک‌دستی و با عجله
منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · مهر ۱۴۰۵ · زمان مطالعه: حدود ۹ دقیقه

طراحی وظیفه‌محور (Task-Oriented Design) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند. ترجمه و بازنویسی این متن با کمک هوش مصنوعی انجام شده است.

خرید بلیت قطار را در نظر بگیرید. شب، پشت لپ‌تاپ، ساعت‌ها و قیمت‌ها را مقایسه می‌کنید. موقع پرداخت، کد تأیید روی گوشی‌تان می‌آید. صبح سفر، دم ورودی ایستگاه، با یک دست چمدان را گرفته‌اید و با دست دیگر بلیت را روی گوشی نشان می‌دهید.

این یک کار است، نه سه کار. اما سه دستگاه، سه موقعیت و سه سطح حوصله دارد. طراحی که فقط «صفحهٔ پرداخت» یا «اپ موبایل» را می‌بیند، هیچ‌وقت کل این مسیر را نمی‌بیند. طراحی وظیفه‌محور برای دیدن همین مسیر است.

طراحی وظیفه‌محور چیست؟

طراحی وظیفه‌محور رویکردی است که تمرکزش روی کامل شدن کار کاربر است. دستگاه، فهرست امکانات، زیبایی یا ملاحظات فنی در درجهٔ دوم می‌آیند. سؤال اصلی این نیست که «این صفحه چه چیزهایی دارد». سؤال این است که «کاربر اینجا می‌خواهد چه کاری را تمام کند».

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

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

یک کار، چند دستگاه

نمودار بالای صفحه همان سفر با قطار است. رشتهٔ صورتی کار را نشان می‌دهد که از یک دستگاه به دستگاه دیگر می‌رود. هر دستگاه یک تکه از کار را برعهده دارد و هر تکه شرایط خودش را دارد.

منبع این را به رایانش فراگیر گره می‌زند. هرچه دستگاه‌ها بیشتر شده‌اند، آدم‌ها کمتر به یک رایانهٔ واحد وابسته‌اند. کارهایی هم که به دستگاه‌ها می‌سپاریم بیشتر شده است. در تجربهٔ یکپارچه، یک دستگاه گام بعدی کار را به دستگاه دیگری می‌سپارد. کار طراح این است که بفهمد هر گام در کجای این اکوسیستم جا دارد.

برای فهمیدن این اکوسیستم، منبع دو ابزار پیشنهاد می‌کند: تحلیل وظیفه و مصاحبهٔ زمینه‌ای. اولی کار را به گام‌ها می‌شکند. دومی نشان می‌دهد آن گام‌ها در دنیای واقعی کجا و چطور اتفاق می‌افتند.

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

صفحه را کوچک نکنید

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

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

منبع موبایل را از دو طرف نگاه می‌کند. از یک طرف محدودیت دارد: صفحهٔ کوچک، اتصال نامطمئن و باتری کم‌جان. از طرف دیگر امکان‌هایی دارد که دسکتاپ ندارد. شخصی‌تر است، همیشه روشن است و حسگرهایی مثل مکان‌یاب و شتاب‌سنج دارد.

نتیجهٔ محدودیت‌ها این است که روی موبایل «کمتر، بیشتر است». باید کارهای کلیدی را پیدا کرد و بقیه را کنار گذاشت، حتی اگر در نسخهٔ دسکتاپ هستند. نمودار بالا همین را نشان می‌دهد. نسخهٔ کوچک‌شده همهٔ دوازده امکان را دارد، ولی هیچ‌کدام راحت نیست. نسخهٔ وظیفه‌محور دو کار اصلی را بزرگ و در دسترس گذاشته و بقیه را یک لایه پایین‌تر برده است. این همان فکری است که پشت موبایل‌اول هم هست.

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

کارکرد متناسب با دستگاه

منبع چند قاعدهٔ اجرایی برای موبایل دارد که همه از یک فکر می‌آیند: کار باید روی همین دستگاه، با همین دست‌ها، راحت انجام شود.

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

منبع یک جزئیات جالب هم دارد. آیکون اپ بهتر است کار اصلی آن را نشان دهد. کاربر باید با یک نگاه بفهمد این اپ برای چه کاری است.

ناوبری هم باید به اندازهٔ کار باشد. منبع سه سطح را از هم جدا می‌کند.

سه گوشی روی یک محور افقی که از راست با کار ساده شروع و به چپ با کار پیچیده تمام می‌شود. گوشی راست بدون ناوبری است: یک دایرهٔ صورتی بزرگ، یک دکمه و چند خط متن، با برچسب یک صفحه همه‌کار. گوشی وسط چند خط متن و یک نوار پایین با چهار تب دارد که تب راست صورتی است، با برچسب تب‌های ساده. گوشی چپ پنج ردیف فهرست با فلش‌های رو به چپ دارد و دو صفحهٔ دیگر پشتش روی هم افتاده‌اند، با برچسب منوی لایه‌لایه مثل تنظیمات گوشی
ساختار ناوبری از پیچیدگی کار می‌آید، نه از عادت — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)
  • - بدون ناوبری: اپ هواشناسی محله‌تان می‌تواند و باید همه‌چیز را در یک صفحه بدهد.
  • - تب‌های ساده: وقتی محتوای یکدست را باید به چند بخش هم‌سطح تقسیم کرد. شرح کامل این الگو را در تب‌ها آورده‌ام.
  • - منوی لایه‌لایه: برای کارهای پیچیده‌تر، مثل تنظیمات گوشی. محتوا گروه‌بندی می‌شود و کاربر سطح‌به‌سطح پایین می‌رود.

منبع بر بازخورد هم تأکید می‌کند. از لرزش گوشی تا نوار پیشرفت، کاربر باید بداند کار درست پیش می‌رود. پنجرهٔ تأیید معمولاً مزاحم است. اما وقتی کاربر می‌خواهد چیزی را پاک کند، همین مزاحمت از او محافظت می‌کند.

مزایا، و تعادل با بقیهٔ ملاحظات

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

منبع چند مزیت دیگر هم برمی‌شمارد. رضایت کاربر بالا می‌رود، محصول راحت‌تر پذیرفته می‌شود و هزینهٔ پشتیبانی پایین می‌آید. جریان‌های کاری سریع‌تر و کم‌زحمت‌تر می‌شوند. نگهداری و به‌روزرسانی هم راحت‌تر است، چون تصمیم‌ها حول کارها گرفته شده‌اند، نه حول امکانات.

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

دام‌های طراحی وظیفه‌محور

این بخش در منبع نیست. به نظر من این رویکرد سه دام رایج دارد که ارزش دارد پیش از شروع بشناسید.

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

کار کاربر، نه کار شرکت. فهرست «کارهای کاربر» گاهی فقط فهرست امکانات است با اسم تازه. «مشاهدهٔ پیشنهادهای ویژه» کار کاربر نیست، هدف بخش فروش است. کارها را از پژوهش بیرون بکشید، نه از جلسهٔ داخلی.

کنار گذاشتن امکان هزینه دارد. کاربری که می‌داند کاری در نسخهٔ دسکتاپ هست، روی گوشی دنبالش می‌گردد. اگر نباشد، فکر می‌کند گم شده یا خراب است. امکانی را که روی موبایل نیست، حذف نکنید و پنهان نکنید. یک لایه پایین‌تر ببرید، یا دست‌کم بگویید کجا پیدایش کند.

طراحی وظیفه‌محور در بافت فارسی

این بخش هم افزودهٔ من است و از کار روی محصولات ایرانی می‌آید.

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

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

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

وب موبایل باید کار اصلی را برساند. بسیاری از اپ‌های ایرانی در فروشگاه اپ آیفون در دسترس نیستند. برای کاربر آیفون، نسخهٔ وب موبایل گاهی تنها راه است. اگر کار اصلی محصولتان در وب موبایل کامل نمی‌شود، این کاربران عملاً محصولی ندارند.

تایپ فارسی را کم کنید. جابه‌جا شدن صفحه‌کلید فارسی و انگلیسی و عدد، روی گوشی هزینهٔ واقعی دارد. فیلدهای عددی را با صفحه‌کلید عددی باز کنید و هر دو نوع رقم فارسی و انگلیسی را بپذیرید. شمارهٔ کارت را هم خودکار چهاررقمی جدا کنید.

جمع‌بندی

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

اگر یک جمله بماند، همین باشد: نسخهٔ موبایل نسخهٔ کوچک دسکتاپ نیست. نسخه‌ای است برای کارهایی که روی گوشی انجام می‌شوند.

منبع

این نوشته «بازنویسی آزاد» است از موضوع What is Task-Oriented Design? و مقالهٔ اصلی آن، Functionality and Mobile Design – Don’t Shrink the Screen, Focus on the Tasks (بدون نام نویسندهٔ مشخص)، منتشرشده در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF). مفاهیم پایهٔ برگرفته از این منبع — تعریف طراحی وظیفه‌محور، استفاده از چند دستگاه و مثال مسیریابی و برنامه‌ریزی سفر، بهینه کردن هر دستگاه برای کارهای خودش، پیوند با رایانش فراگیر و سپردن گام‌ها بین دستگاه‌ها، تحلیل وظیفه و مصاحبهٔ زمینه‌ای، بافت استفاده و یادگیری در طول زمان، محدودیت‌ها و امکان‌های موبایل، کنار گذاشتن امکانات، کارکرد شخصی، سؤال «کاربر کِی سراغ این کارکرد می‌آید»، قاعده‌های در جریان گذاشتن کاربر و شست و کنترل‌های کم و پایین صفحه و کم کردن تایپ، سه سطح ناوبری، بازخورد و پنجرهٔ تأیید، نگه داشتن کار، آیکون نمایانگر کار اصلی، سادگی بار اول، مزایا و مثال شزم، و تعادل با زیبایی و امکان‌پذیری فنی از راه وایرفریم و نمونهٔ اولیه و آزمون کاربر — از این منبع گرفته شده، اما متن فارسی و توضیح‌ها کاملاً مستقل نوشته شده‌اند.

متن مقالهٔ اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمه‌به‌کلمه ارائه نشده و متن کامل انگلیسی (به‌همراه همهٔ تصاویر) در لینک زیر در دسترس است.

بخش‌های افزودهٔ مترجم: صحنهٔ آغازین خرید بلیت قطار و نمودار رشتهٔ یک کار در سه دستگاه؛ نمودار نسخهٔ دسکتاپ و نسخهٔ کوچک‌شده و نسخهٔ وظیفه‌محور؛ نمودار سه سطح ناوبری روی محور پیچیدگی و پیوندش با مقالهٔ تب‌ها؛ کار به‌عنوان نقطهٔ شروع و نه تنها نقطه؛ کل بخش «دام‌های طراحی وظیفه‌محور» شامل تجربه‌های کاوشی، کار شرکت به‌جای کار کاربر، و هزینهٔ کنار گذاشتن امکان؛ و کل بخش «در بافت فارسی» شامل گوشی به‌عنوان تنها دستگاه، پیامک به‌عنوان یک دستگاه در زنجیرهٔ کار، آمادگی برای قطع اینترنت، اهمیت وب موبایل برای کاربران آیفون، و کم کردن تایپ فارسی.

تصاویر: هیچ تصویری از منبع اینجا نیامده است. چهار تصویر منبع با لایسنس CC BY-SA 4.0 منتشر شده‌اند — نمودار سه‌دایره‌ای کار و زیبایی و امکان‌پذیری فنی، نمودار طراحی موبایل‌اول، تصویر ناوبری دسترس‌پذیر و کارت سه دستگاه — اما همهٔ آن‌ها برچسب یا متن انگلیسی دارند و بازنشر نشده‌اند. تصویر شزم با شرایط «استفادهٔ منصفانه» (Fair Use) آمده است. هر سه نمودار این صفحه طراحی اختصاصی مترجم است.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی و با کمک هوش مصنوعی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - طراحی وظیفه‌محور چیست؟
  • - یک کار، چند دستگاه
  • - صفحه را کوچک نکنید
  • - کارکرد متناسب با دستگاه
  • - مزایا، و تعادل با بقیهٔ ملاحظات
  • - دام‌های طراحی وظیفه‌محور
  • - در بافت فارسی
  • - جمع‌بندی

برچسب‌ها

  • طراحی وظیفه‌محور
  • موبایل
  • چنددستگاهی
  • ترجمه