من هم مثل خیلی از شما هنگام طراحی رابط‌های کاربر فارسی به مشکل تشخیص بهترین جهت واسه الگوها (پترنها) برخوردم. زمانی شروع کردم به طراحی چپ‌به‌راست، اما وقتی با مشکلاتش مواجه شدم، رویکردمو به قرینه‌سازی تغییر دادم. متوجه شده بودم که واقعاً رویکرد چپ‌به‌راست واسه رابط‌های کاربری فارسی مناسب نیست؛ اما نه واسه خودم استدلالی داشتم و نه می‌تونستم چرایی این موضوع رو واسه دیگران توضیح بدم. ولی وقتی کمی دقیق‌تر بررسی کردم، دیدم با رویکرد طراحی اتمی بهتر می‌تونم استدلال کنم. پس در این داستان با من همسفر باشید تا بگم چرا باید یا رومی روم بود، یا زنگی زنگ!
- مقدمه
- عوامل تأثیرگذار بر انتظارات جهتی کاربر فارسی‌زبان:
- استراتژی من
- نقد به یادداشت چه پترن‌هایی در زبان فارسی قرینه می‌شوند؟
- طرح مبحث طراحی اتمی برای رابط کاربر فارسی
- ارائه راه حل برای برخی مشکلات
مشکل اول: طراحی نوارهای پیشرفت (Progress bars)
مشکل دوم: اسلایدر انتخاب محدوده اعداد
مشکل سوم: راست‌چین‌سازی اعداد
مشکل چهارم: امتیازدهی ستاره‌ای
نکته: واسه راحتی کار، در این نوشته انگلیسی رو به عنوان نماینده زبان‌های چپ‌به‌راست و فارسی رو به عنوان نماینده زبان‌های راست‌به‌چپ در نظر می‌گیرم.
جهت نوشتاری فارسی راست به چپه و انگلیسی چپ به راست. تا اینجا ظاهراً مشکلی نیست. ولی این جهت‌ها در ارتباط با موارد دیگه مشکل‌ساز میشن. یکیش جهت نوشتاری ریاضیه. زبان انگلیسی همسو با ریاضیه اما فارسی برعکسه. همین مسأله باعث چالش‌های متعددی برای طراحان رابط کاربر فارسی زبان میشه.
این تفاوت رو ببینید. یک کاربر انگلیسی همینطور که داره متن رو می‌خونه و میره، اعداد رو هم بدون تغییر جهت می‌خونه. اما کاربر فارسی‌زبان مجبوره جهت خوندنش رو دو بار عوض کنه:
به نظر می‌رسه این مورد خیلی حاد نیست و چاره‌ی مناسبی هم واسش به نظر نمی‌رسه. اما موضوع تداخل جهتی فارسی و ریاضی به اینجا ختم نمیشه. این تفاوت جهت، نه تنها در اعداد، بلکه در بردارها هم وجود داره. دستگاه مختصات دکارتی رو در نظر بگیرید که جهت مثبت افقیش از چپ به راسته و کاربری که توی مدرسه ریاضی خونده، عادت داره فلش‌ها رو از سمت چپ به راست بکشه. این موضوع در خیلی از مواردی که به جهت حرکت ارتباط پیدا می‌کنه، توی طراحی UI فارسی دست و پاگیر میشه. چون ما داریم از طرفی کل صفحه رو راست به چپ می‌کنیم، از طرف دیگه هم باید ناخودآگاه جهتی کاربر رو که نشأت گرفته از جهت چپ‌به‌راست ریاضی و انگلیسی هست؛ در نظر بگیریم.
در حال حاضر به نظر من این انتظارات تحت تأثیر این چهار مدل قرار گرفته:
- ساختار اتم‌ها، مولکول‌ها، ارگانیسم‌ها و...
- جریان صفحات (User Flow)
۲. ریاضی: چپ به راست (محدود)
- اعداد
- برخی جهت‌های برداری (برخی فلش‌ها، نوارهای پیشرفت و...)
۳. انگلیسی: چپ به راست (عادت)
۴. جهت‌های دایره‌ای: ساعتگرد
من بر اساس روش اتمی طراحی رابط کاربر فارسی که در ادامه توضیح خواهم داد، معتقدم یک رابط کاربر فارسی باید همه چیزش راست به چپ باشه! چون ما جهت غالبمون راست به چپه. دو مورد دیگه، یعنی ریاضی و انگلیسی، فرع بر جهت فارسی هستن. ریاضی کاربرد کمی در متون فارسی داره و انگلیسی هم صرفاً به دلیل عادت به وجود اومده. اما عادت‌ها اولاً اصل نیستن و ثانیاً به مرور تغییر میکنن. یعنی جهت رسم‌الخط فارسی چپ‌به‌راست نخواهد شد، اما عادت کاربری که از محصولات انگلیسی استفاده کرده، می‌تونه تغییر کنه. نهایتاً جهت مثبت دایره‌ای هم برای هر مدل ذهنی‌ای ساعتگرده و خوشبختانه توی این یکی دوشواری نداریم :)
رویکرد شخصی من همیشه بر راست به چپ بودن تمامی الگوهای رابط کاربره. در این مسیر، هر راست‌به‌چپ‌سازی‌ای که مشکل شناختی به وجود بیاره، باید واسش چاره اندیشید و اگه چاره‌ها کارگر نشدن، اون موقعه که دیگه مجبوریم از چپ به راست استفاده کنیم؛ اما باز هم به صورت مقطعی! تا اینکه چاره‌ای بهتر اندیشیده شه.
یکی از نقدهایی که به این یادداشت دوست خوبم «امیر تقی‌آبادی» دارم، تک بُعدی نگاه کردن به مسأله‌ی انتظار جهتی فارسی‌زبانانه که فقط جهت ریاضی رو در نظر میگیره. اما ریاضی اصلاً در رابط‌های کاربر فارسی غالب نیست. امیر توی این یادداشت میگه:
بر اساس تحقیقات شخصی از 61 نفر که خواستم ابتدا یک فلش رو به بالا بکشند (به این دلیل که جهت مختصاتی در کاغذ مشخص شود) وسپس یک فلش رو به جلو بکشند 58 نفر فلش رو به جلو را به سمت راست کشیدند.
این به این معنی است علارقم تمامی نظریه‌های قرینه‌ی فعلی همچنان از نظر تمامی کاربران حرکت رو به جلو به سمت راست و حرکت رو به عقب به سمت چپ است.
- امیر تقی‌آبادی
این آزمایش دو مشکل عمده داره:
اما خیر! این صرفاً می‌تونه توی بعضی از عناصر جهت‌دار ریاضی کاربرد داشته باشه. در رابطه با جهت عمودی، گرانش از بالا به پایین ناقض این نگرشه (قائده گوتنبرگ) و یک نمونه‌ی مناسب برای نقض جهت چپ به راست مدل ذهنی کاربران، شماره‌گذاری صفحه‌بندی (Pagination) هست که بهترین حالتش راست به چپه. چون اعداد صفحات کتابهای فارسی از راست به چپ زیاد میشن:
توی این تصویر، اون فلش‌ها دارن جهت صفحات «فارسی» رو نشون میدن نه محور ریاضی رو! نمی‌تونیم بگیم چون کاربران توی یک آزمایش، جهتِ روو به جلو رو از چپ به راست تشخیص دادن، پس «در صفحه‌ی دیجیکالا فلش سمت چپ دکمه پرداخت در نگاه اول معنای برگشت را می‌رساند.» (جمله‌ای از امیر تقی‌آبادی)
بذارید این نظریه رو با رویکرد «طراحی اتمی» مطرح کنم:
اگه بدون هیچ پیش‌زمینه‌ای بخواین جهت حرکت هر کدوم از دو آدمک زیر رو رسم کنین، به کدوم سمت رسم می‌کنین؟
اگه از نظر شناخت و تشخیص مشکلی نداشت باشیم، برای تصویر سمت راستی به سمت چپ، و برای تصویر سمت چپی به سمت راست فلش می‌کشیم. این دیگه نه کاری به جهت نوشتاری ریاضی داره، نه فارسی و نه انگلیسی. این صرفاً یه نفره که داره می‌دوه!
حالا بیاید با همین رویکرد، پترنهای فارسی رو بسازیم. فرض کنید بخوایم واسه این دو کلمه، فلشِ روو به جلو رسم کنیم:
بهترین حالت به کدوم سمته؟ مشخصه نوشته‌ی انگلیسی به سمت راست و در سمت راست نوشته؛ و فارسی به چپ و در سمت چپ نوشته. چون اگه برای فارسی فلش رو در سمت راست بذاریم، کاربر اول فلش رو می‌بینه و بعد کلمه رو می‌خونه. و اگه جهت فلش به سمت راست باشه، خلاف جهت خوندن ما میشه.
با این حساب حالا ما یک دکمه‌ی متنی یا در واقع یک اتم داریم:
حالا بیاید این اتم رو به همراه یک اتم دیگه به یک مولکول تبدیل کنیم:
خیلی خب. بریم این مولکول رو با یه اتم دیگه ترکیب کنیم تا یک ارگانیسم به دست بیاد:
می‌بینیم که چون جهت مولکولمون به سمت چپه، اسلایدر تصاویر هم باید راست به چپ شه. اگه جهت اسلایدر چپ‌به‌راست بشه، با دیگر مولکول‌ها تضاد جهتی به وجود میاد. حالا بریم این ارگانیسم رو با چندتا ارگانیسم دیگه به یک تمپلیت تبدیل کنیم (کاری به بی‌ربط بودن ارگانیسما نداشته باشید، صرفاً میخواستم همشونو توی یه صفحه جا بدم) :
حالا جزئیات اضافه میشه و صفحه ساخته میشه. وقتی چند صفحه رو در کنار همدیگه قرار بدیم، در دید کلی جریان کاربر رو می‌سازن:
خب. می‌بینید که چون جهت حرکت در ریزترین اتم‌ها راست‌به‌چپه، تمامی ساختارهای بزرگتر به ناچار راست‌به‌چپ میشن و نمیشه اونها رو برعکس در نظر گرفت. آیا میشه در یک رابط کاربر که تمامی اتم‌ها جهت مثبتشون به سمت چپه، بیایم جهت‌های برگشت رو هم به سمت چپ بذاریم؟ (مثل دکمه بازگشت)
مسلماً نمیشه چون توی جهت‌ها تضاد به وجود میاد. پس این نظریه‌ای که میگه فلش به سمت چپ تداعی بازگشت می‌کنه، از نظر ساختاری همینجا رد میشه.
اما به نظر من ممکنه توی یک محصول خاص، پرسونای ما به دلیل این که اصلاً با اینترفیس فارسی کار نکرده و اکثر وقتش با محصولات انگلیسی گذشته، عادت به جهت چپ‌به‌راست داشته باشه. اونجا بهترین کار گرفتن تست کاربردپذیری هست که ببینیم آیا راست‌به‌چپ کردن محصول ما تضاد فاحشی با مدل ذهنی کاربر به وجود میاره؟ اگر ببینیم که قرینه‌سازی ما به سهولت استفاده از محصول ضربه می‌زنه و هیچ راه دیگری نداریم، می‌تونیم اون رو قرینه نکنیم. ولی حداقل بدونیم که این کار نه اصولیه و نه می‌تونه همیشگی باشه! چنین محصولی از لحاظ جهت شناسی در اینترفیس فارسی یک استثناست، این کار (قرینه نکردن) هیچ توجیه ساختاری نداره و رویکرد چپ‌به‌راست ما مقطعی خواهد بود. پس اون رو به تمامی محصولات تعمیم ندیم.
هر کاری کنیم، به هرحال پترن‌هایی هستن که توی این مدل اتمی نمیشه به راحتی قرینه‌شون کرد. اگه یادتون باشه گفتم من اساس رو بر قرینه‌سازی همه چیز میذارم؛ اما درصورتی‌که قرینه‌سازی در جایی مشکلی پیش بیاره، اول سعی میکنم حلش کنم و اگه راه مناسبی نیافتم، به صورت مقطعی رویکرد چپ‌به‌راست رو می‌پذیرم تا بالاخره راهی پیدا شه.
اینجا شروع میکنم به دادن چند راه حل و تأکید میکنم که:
۱. این الگوها مطمئناً به مرور زمان بهبود پیدا میکنن.
۲. دوست دارم این یک روال بشه و علاوه بر خودم، دیگران هم راه حل‌هاشونو منتشر کنن.
۳. اگه راه‌حل‌های جدیدی پیدا کردم، در نوشته‌ی جدیدی می‌نویسم و انتهای این متن لینک میدم
کاربر فارسی زبان عادت داره صفحه رو از سمت راست به چپ بخونه، ولی بر اساس مدل ذهنی ریاضی و عادت انگلیسیش، عادت داره نوارهای پیشرفت رو از چپ‌به‌راست ببینه. اما این مسأله توی متون فارسی به ۲ دلیل مشکلاتی ایجاد می‌کنه:
۱. قابلیت اسکن (Scanability): اگه ما بیایم نوار پیشرفت رو چپ به راست قرار بدیم (تصویر سمت راست)، قابلیت اسکن کردن کم میشه و کاربر پس از خوندن متن مجبور میشه چشمشو ببره از سمت چپ تصویر شروع به دیدن کنه و این عوض کردن جهت، هم از کاربر زمان میگیره و هم تلاش اضافه‌ست. این زمان و تلاش اضافه می‌تونه با عریض شدن صفحه خیلی بیشتر هم بشه.
۲. ترازبندی (Alignment): این کار می‌تونه از نظر بصری ترازبندی رو به هم بریزه.
اگه هم بخوایم از نوار پیشرفت رو راست به چپ بذاریم، می‌تونه با انتظارات جهتی برخی کاربران که از بردارهای ریاضی و عادت انگلیسی اومده، در تضاد باشه.
برای مطالعه موردی بیایید مثال امیر تقی‌آبادی (چیکارش داری بنده خدا رو؟) رو در نظر بگیریم که با استناد به همون جهت بُرداری ریاضی، نقدی به ویزارد ایوند کرده و میگه بهتره چپ به راست باشه. اما در صورت چپ‌به‌راست کردن این ویزارد، از اونجایی که این صفحه خیلی عریضه، کاربر با اسکن کردن صفحه نمیتونه سریع تشخیص بده نوار چقدر پیشرفت کرده و مجبوره حتماً منتها الیه سمت چپ رو نگاه کنه تا متوجه بشه:
راه حل اول: پیشنهاد من، جهت راست به چپه. چون تنها ایرادی که می‌تونه داشته باشه، عدم تطابق با انتظارات کاربره که ممکنه سالها پروگرس بار رو از چپ به راست دیده باشه. اما انتظار کاربر به مرور زمان تغییر می‌کنه. الان خیلی از پرسوناهایی که بیشتر از محصولات فارسی استفاده میکنن، به راست‌به‌چپ عادت کردن. اما با این‌حال بسته به موقعیت و محصولات مختلف باید تست بشه.
راه حل دوم: برای ویزاردها میشه مثل ایوند رفتار نکرد و برای هر مرحله از ایستگاه (Station) استفاده کرد. در این حالت میشه توی بعضی جاها نوار رو در حالت عمودی قرار داد که همه‌ی کاربران با انواع مدل‌های ذهنی باهاش راحت باشن. البته محدودیت‌های زیادی داره اما برخی جاها کارسازه:
راه حل سوم: برای نوارهای پیشرفت میشه تا جایی که امکانش هست از نوار پیشرفت دایره‌ای استفاده بشه. چون جهات دایره‌ای توسط همگی پرسوناها «ساعتگرد» در نظر گرفته میشن.
توی اسلایدرهای انتخاب محدوده اعداد، بار شناختی زیادی به کاربران وارد میشه. کاربر نمی‌دونه اعداد رو با جهت ریاضی جلو-عقب کنه یا با جهت حروف فارسی. شخصا دیدم که اکثر افراد یک بار آزمون و خطا میکنن تا آشنا شن.
توی نمونه‌ی انگلیسی انتخاب خیلی راحته. کاربر هم از نظر جهت نوشتاری انگلیسی و هم ریاضی چپ به راسته، پس انتظار داره عدد اسلایدر هم از سمت چپ به راست رشد کنه. اما توی مدل فارسی اینطور نیست. دیجیکالا سعی کرده با فلش‌هایی که به سمت داخل گذاشته و همینطور حروف اضافه‌ی «از» و «تا» که زیر هر کدوم نوشته، به کاربر بفهمونه قیمت از راست به چپ زیاد میشه. اما این باعث گیجی بیشتر کاربر شده. کاربر اون فلش‌ها رو بر اساس مدل ذهنی ریاضیش می‌بینه و «از» و «تا» رو فارسی می‌خونه.
راه حل: من مدلی رو پیشنهاد میدم که هم راست به چپ رو حفظ می‌کنه و هم بار شناختی کاربر رو به حداقل می‌رسونه:
توی این مدل، حروف فارسی روی اسلایدر قرار گرفتن و بر جهت ریاضی غلبه میکنن. کاربر به محض دیدن حرف اضافه‌ی «از» بر روی دایره‌ی سمت راست، بدون نیاز به فکر کردن متوجه میشه که جهت این اسلایدر از راست به چپه. برای جلوگیری از مخفی شدن اعداد زیر انگشت هم توی حالت فشرده (Pressed) باید اعداد بالا برن که به قابل مشاهده بودن وضعیت سیستم (Visibility of system status) لطمه‌ای وارد نشه و همچنین حالت نزدیکی دو گیره به همدیگه هم در نظر گرفته شده.
توی UIهای انگلیسی همیشه توصیه میشه که توی جاهایی مثل فاکتور که مبالغ یا اعداد در برابر نام اون آیتم‌ها قرار می‌گیرن، اعداد راست‌چین باشن تا قابلیت اسکن کردن (Scanability) بالا بره. در این حالت بدون نیاز به خوندن همه مبالغ و صرفاً با خوندن عدد سمت چپ بزرگترین مبالغ، مشخص میشه کدومشون بزرگ‌تره:
خب این موضوع توی انگلیسی راحته. چون جهت نوشتاری انگلیسی و ریاضی یکیه. اما بیایم ببینیم آیا تو فارسی هم میشه این قضیه رو پیاده سازی کرد؟
می‌بینیم که بازم به مشکل خوردیم. چرا نمیشه تو فارسی هم خرو داشته باشیم و هم خرما رو؟ فقط انگلیسی زبونا باید روی خرشون بشینن و خرما بخورن؟ این شد که راه حلی به ذهنم رسید!
راه حل: مدل زیر هر دو مسأله رو واسه ما حل می‌کنه. گرچه به تمیزی مورد انگلیسی درنمیاد، اما به هرحال بهتر از دو مورد قبلیه. امیدوارم در آینده بتونم بازم پیشرفتش بدم:
امتیازدهی ستاره‌ای، یکی از اون الگوها (پترنها) ست که حتی فارسی‌ترین پرسونا هم انتظار داره از چپ به راست باشه. اما ظاهراً این مشکل محدود به زبان فارسی نیست. گوگل میت برای درک راحت‌تر نقطه شروع امتیازدهی، با نوشتن «خیلی خوب» و «خیلی بد» کاربر رو راهنمایی کرده:
توی ایران هم اونقدر این مسأله پیچیده شده که اسنپی که کل اپلیکیشنش راست‌به‌چپه، عطاش رو به لقاش بخشیده و امتیازدهی ستاره‌ای رو چپ‌به‌راست قرار داده:
جالب اینه که اسنپ حتی بقیه عناصر صفحه رو هم بر خلاف بقیه قسمت‌های اپلیکیشنش چپ‌به‌راست کرده. اما به نظر من این مشکل رو میشه خیلی بهتر حل کرد. شاید چون اسنپ تبدیل به یک سوپر اپ شده، بازنگری این صفحه توی اولویت‌های تیم محصولش نیست.
کافه بازار حداقل توی این مورد مثل من فکر می‌کنه: «باید همه چیز رو راست به چپ کنیم و اگر جایی مشکلی پیش اومد، تلاش کنیم حلش کنیم». از همین روو، اومده جهت رو راست‌به‌چپ در نظر گرفته و با گذاشتن شماره زیر ستاره‌ها، کاربر رو راهنمایی کرده:
توی این یادداشت، از منظر روش طراحی اتمی اثبات کردم که چون جهت تمامی اتم‌های رابط کاربر فارسی راست‌به‌چپه، نمی‌تونیم در مقیاس‌های بزرگتر مثل مولکول‌ها، ارگانیسم‌ها، تمپلیت‌ها، صفحات و جریان (فلوی) محصولات خلاف این جهت عمل کنیم. اما به هرحال جاهایی استثنائاتی وجود داره که اکثر این استثنائات چون به عادت‌های کاربران مرتبط هستن، همیشگی نیستن و حتی از محصولی تا محصول دیگه فرق میکنن. بهترین راهکار اینه که پیشفرضمون رو راست به چپ بگیریم، اگر مشکلی به وجود اومد سعی کنیم با رویکرد راست‌به‌چپ حلش کنیم و اگر هیچ راه حل مفیدی به ذهنمون نرسید، به استفاده از روش مرسوم ادامه بدیم تا بالاخره راه حلی مناسبی پیدا کنیم.
