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

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

نشانه‌های بصری (Visual Cues) چیست؟

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

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

تعریف

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

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

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

نشانه‌ها سلسله‌مراتب بصری را هم می‌سازند، و رابطِ دارای سلسله‌مراتب روشن بدیهی‌تر به نظر می‌رسد.

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

دو عنصر با متن یکسان: یکی با نشانه‌های فشردنی‌بودن و یکی بدون آن‌ها، و جمله‌ای که هرکدام به کاربر می‌گوید
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

چرا نشانهٔ بصری اهمیت دارد

  • - ۱. تجربهٔ بهتر: نشانه کاربر را در صفحه راه می‌برد و بار شناختی را کم می‌کند، چون الگویی پیش‌بینی‌پذیر به او می‌دهد.
  • - ۲. نرخ تبدیل بالاتر: نشانه کاربر را به سمت کنش مورد نظر می‌برد. ثبت‌نام، خرید و پرکردن فرم، همه از همین هدایت اثر می‌گیرند.
  • - ۳. دسترس‌پذیری بهتر: کنتراست رنگ نمونهٔ روشنش است، چون به کاربری که در تفکیک رنگ مشکل دارد امکان جداکردن عنصرها را می‌دهد. نشانه می‌تواند دسترس‌پذیری را هم بالا ببرد و هم پایین.
  • - ۴. تقویت هویت برند: استفادهٔ یکدست از رنگ و آیکون، برند را شناختنی‌تر می‌کند.

صریح در برابر ضمنی

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

نشانهٔ ضمنی ظریف‌تر است و به همان اندازه توجه را هدایت می‌کند. کنتراست رنگِ خوب چشم را می‌برد، و کادرکشیدن دور یک متن هم.

پس تفاوت این دو در اثرگذاری نیست. تفاوت در این است که کاربر خودِ نشانه را می‌بیند یا فقط نتیجه‌اش را.

دوازده جایی که نشانه از آن ساخته می‌شود

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

  • - ۱. فلش: نشانهٔ صریحِ جهت؛ سمت کشیدن در اسلایدر، یا محتوای بیشتر زیر خط تاشو.
  • - ۲. دکمه و کنترل‌های مشابه: حاشیه و سایه و رنگ، فشردنی‌بودن را می‌رسانند. مستطیل گردگوشه خودش می‌گوید «دکمه‌ام». کلید ضامن و نوار کشویی و چک‌باکس هم همین‌جا هستند.
  • - ۳. رنگ: قرمز برای خطا، سبزِ زنده برای فراخوان.
  • - ۴. کنتراست: جداکردن عنصر مهم از بقیهٔ طرح، با رنگ یا اندازه.
  • - ۵. شکل حروف: درشت و توپر برای سرتیتر، ریز و نازک برای بدنه، و پیوندِ رنگی یا زیرخط‌دار.
  • - ۶. آیکون: سبد زباله برای حذف، دوربین برای عکس، خانه برای صفحهٔ اصلی.
  • - ۷. فضای سفید: گروه‌کردن و جداکردن عنصرها، و دادن فضا به چیزی که مهم است.
  • - ۸. بافت: بازسازی ظاهر جسم واقعی روی سطح دوبعدی؛ سایه تأکید می‌کند که این دکمه فشردنی است.
  • - ۹. حرکت: انیمیشن و ریزتعامل، کاربر را در جریان کار راه می‌برند.
  • - ۱۰. اثر شناوری: عوض‌شدن رنگ زیر نشانگر می‌گوید این عنصر تعاملی است.
  • - ۱۱. پیام بازخورد: تیک سبز و ضربدر قرمز، نتیجهٔ کنش را اعلام می‌کنند.
  • - ۱۲. تصویر: چهرهٔ آدم‌ها راه را نشان می‌دهد، چون کاربر همان‌جا را نگاه می‌کند.

مورد آخر پشتوانهٔ تجربی مستقیمی در ردیابی چشم دارد.

چهار گام ساختن نشانهٔ اثرگذار

۱. کاربر را بشناسید. پژوهش کاربر با پیمایش و مصاحبه می‌گوید کاربر دنبال چه کاری است و کدام نقطه‌درد را باید جبران کنید.

۲. معماری اطلاعات را تعریف کنید. نشانه بر ساختاری می‌نشیند که از قبل هست، پس معماری اطلاعات جای نشانه‌ها را تعیین می‌کند.

محتوا را در دسته‌های منطقی بچینید، و چیزهای مهم را با رنگ و گروه‌بندی و اصول گشتالت جدا کنید.

۳. نشانهٔ درست را انتخاب کنید. اینجا سه چیز را کنار هم می‌گذارید: صریح یا ضمنی بودن نشانه، سبکش، و جورشدنش با زبان طراحی رابط.

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

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

۴. آزمون کنید و تکرار کنید. یک پرسش مشخص را همیشه بپرسید: آیا نشانه‌های شما روی موبایل هم به‌خوبی دسکتاپ کار می‌کنند؟

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

هر نشانه یک جمله می‌گوید

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

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

  • - جملهٔ وجود: «اینجا چیزی هست.» کنتراست، فضای سفید و اندازه همین را می‌گویند و چیزی بیشتر.
  • - جملهٔ کنش: «با من می‌توانی این کار را بکنی.» سایهٔ دکمه، حاشیهٔ کادر و اثر شناوری در این دسته‌اند.
  • - جملهٔ بازخورد: «کاری که کردی، این شد.» تیک سبز و پیام خطا و انیمیشن بارگذاری همین را اعلام می‌کنند.

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

اگر دو نشانه جملهٔ یکسانی گفتند، یکی تکرار است. تکرار همیشه بد نیست، ولی باید انتخاب باشد نه اتفاق.

اگر برای یک عنصر دو جملهٔ ناسازگار بیرون آمد، مسئلهٔ جدی‌تری دارید که بخش بعدی موضوعش است.

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

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

عنصری که دو نشانهٔ متعارض روی آن نشسته است، و هزینهٔ تردیدی که برای کاربر می‌سازد
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

آموخته یا بی‌واسطه

این بخش هم افزودهٔ من است، چون توصیهٔ «آیکون شناخته‌شده انتخاب کنید» یک پرسش را بی‌جواب می‌گذارد: شناخته‌شده برای که؟

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

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

آزمونش ارزان است. صفحه را به کسی بدهید که هرگز محصولی از این جنس به کار نبرده؛ آنچه باقی می‌ماند بی‌واسطه است.

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

دوم، واژگان نشانهٔ بی‌واسطه کوچک است. می‌تواند بگوید «اینجا مهم است» و نمی‌تواند بگوید «این پرونده ذخیره می‌شود».

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

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

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

وقتی دو نشانه یکی نمی‌گویند

این بخش هم افزودهٔ من است. توصیهٔ «از تکرار بی‌مورد پرهیز کنید» دربارهٔ دو نشانهٔ هم‌معنا حرف می‌زند و دربارهٔ دو نشانهٔ متعارض ساکت است.

تعارض یعنی دو جمله دربارهٔ یک عنصر که هر دو نمی‌توانند درست باشند. پنج جفتِ رایجش این‌ها هستند.

  • - شکل می‌گوید «دکمه‌ام» و رنگِ خفه می‌گوید «غیرفعالم».
  • - کارت سایه و اثر شناوری دارد و کلیک‌پذیر نیست.
  • - متنی زیرش خط دارد و پیوند نیست.
  • - خانهٔ فرم خاکستری است و در واقع اجباری است.
  • - فلشی به دکمه‌ای اشاره می‌کند که هنوز فعال نشده.

کاری که کاربر می‌کند تردید است، و هزینه‌اش سه شکل دارد: بردن نشانگر، کلیک آزمایشی، و خواندن متن راهنما.

هر سه از زمانی که نشانه قرار بود صرفه‌جویی کند کندترند. پس نشانهٔ متعارض بدتر از نبودِ نشانه است، نه معادلش.

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

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

راه درمان هم برعکس آن چیزی است که معمولاً انجام می‌شود. نشانهٔ سوم اضافه نکنید؛ یکی از آن دو را بردارید. برچسب گذاشتن روی تعارض فقط جمله‌ها را سه‌تا می‌کند.

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

نتیجه‌اش تغییری در روش وارسی است. سامانهٔ طراحی را حالت‌به‌حالت مرور کنید، نه مؤلفه‌به‌مؤلفه. برای هر حالت بپرسید کدام نشانه‌ها هم‌زمان روشن‌اند.

در بافت فارسی

یک: آن چیزی را آینه کنید که اشاره می‌کند، نه آن چیزی را که تصویر می‌کند. این دقیق‌ترین قاعدهٔ من برای آیکون در چیدمان راست‌به‌چپ است.

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

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

خطای قرینه‌اش هم هست: قاعده‌ای سراسری که همهٔ آیکون‌ها را آینه می‌کند و دستهٔ ذره‌بین را به سمت غلط می‌برد.

جای وزن بصری بحث دیگری است و در ویژگی‌های بصری پیش‌توجهی آمده. اینجا مسئله جهتِ خودِ پیام است، نه جای آن.

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

حرف B برای توپر و I برای مورب، در ویرایشگر فارسی دو مثال روشنش هستند. خط فارسی مورب ندارد و آن دو حرف هم فارسی نیستند.

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

سه: زیرخط در متن فارسی گران است و حذفش گران‌تر. حرف‌های فارسی دنبالهٔ زیرخطی دارند و خطِ زیر متن از میان «ج» و «ی» و «ر» می‌گذرد.

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

راه بهترش نگه‌داشتن زیرخط با فاصله از خط کرسی است. اگر ممکن نبود، نشانهٔ دومِ غیررنگی بگذارید: وزن قلم یا کادر.

چهار: در فارسی برچسب از آیکون ارزان‌تر است. نوار ابزارِ فقط-آیکون عادتی از رابط‌های انگلیسی است، آن هم چون واژه‌های انگلیسیِ همین کنش‌ها بلندند.

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

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

چهار مسئلهٔ نشانهٔ بصری در بافت فارسی
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

جمع‌بندی

  • - نشانهٔ بصری: عنصری که کاربر را به کنش یا محتوایی مشخص هدایت می‌کند — فلش · آیکون · شکل حروف
  • - سه کارش: گرفتن توجه · پیشنهاد مسیر کنش · دادن بازخورد
  • - دو دسته: صریح مثل فلش و ذره‌بین · ضمنی مثل کنتراست رنگ و کادر دور متن
  • - چهار سود: تجربهٔ بهتر · نرخ تبدیل بالاتر · دسترس‌پذیری بهتر · تقویت هویت برند
  • - دوازده حامل: فلش · دکمه و کنترل · رنگ · کنتراست · شکل حروف · آیکون · فضای سفید · بافت · حرکت · شناوری · پیام بازخورد · تصویر
  • - چهار گام ساختن: شناخت کاربر · معماری اطلاعات · انتخاب نشانه · آزمون و تکرار
  • - سه توصیه: یکدستی · روشنی · اصول گشتالت
  • - هر نشانه‌ای که کار می‌کند یکی از سه جمله را می‌گوید: وجود · کنش · بازخورد
  • - بی‌جمله یعنی تزئین · جملهٔ تکراری یعنی افزونگی · دو جملهٔ ناسازگار یعنی تعارض
  • - پیدا شدن نشانه و معنی نشانه دو مسئلهٔ مستقل‌اند · یکی بی‌جمله دیده می‌شود · دیگری با جمله دیده نمی‌شود
  • - نشانهٔ بی‌واسطه معنایش در هندسه است · نشانهٔ آموخته قرارداد است · واژگان دومی بزرگ‌تر است
  • - پیام بازگشت‌ناپذیر تنها به نشانهٔ آموخته نسپارید · حذف یک کلمه لازم دارد · قرارداد را جابه‌جا نکنید
  • - نشانهٔ متعارض بدتر از نبودِ نشانه است · تردید هزینه دارد · حرکت از رنگ بلندتر حرف می‌زند
  • - درمان تعارض: یکی از دو نشانه را بردارید · نشانهٔ سوم نیفزایید · سامانه را حالت‌به‌حالت مرور کنید
  • - در فارسی: آنچه اشاره می‌کند آینه شود و آنچه تصویر می‌کند نه · قرارداد لاتین نگاشت آموخته ندارد · زیرخط پیوند را نگه دارید · برچسب از آیکون ارزان‌تر است

منبع

این نوشته «بازنویسی آزاد» است از مطلب What are Visual Cues? در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف نشانهٔ بصری به‌عنوان عنصری مثل فلش و آیکون و شکل حروف که کاربر را به سمت کنش یا محتوایی مشخص در رابط هدایت می‌کند و استفادهٔ طراح از آن برای گرفتن توجه و پیشنهاد مسیر کنش و دادن بازخورد؛ نقش این نشانه‌ها در ساختن سلسله‌مراتب بصری و بدیهی‌تر و آسان‌تر شدن ناوبری رابط؛ نام دیگرشان یعنی نشانهٔ جهت و تشبیهشان به تابلوهای راهنمایی جاده، و اینکه کاربری که راحت از کاری به کار بعدی می‌رود دیگر لازم نیست به خود رابط فکر کند؛ گزارهٔ کارکردی‌بودن این عنصرها در برابر تزئینی‌بودن و لزوم جورشدنشان با ظاهر کلی طرح و اثر ریزترین جزئیات بر فکر و احساس کاربر؛ چهار دلیل اهمیتشان یعنی کاربرپسندتر شدن رابط و کاهش بار شناختی با الگوی روشن و پیش‌بینی‌پذیر، بالابردن نرخ تبدیل با هدایت به نقطه‌هایی مثل ثبت‌نام و خرید و پرکردن فرم، بهبود دسترس‌پذیری با نمونهٔ کنتراست رنگ برای کاربری که در تفکیک رنگ مشکل دارد، و تقویت هویت برند با استفادهٔ یکدست از رنگ و شکل حروف و آیکون؛ تفکیک نشانهٔ صریح یعنی فلشی که به فراخوان اشاره می‌کند و ذره‌بینی که اطلاعات را برجسته می‌کند از نشانهٔ ضمنی یعنی کنتراست رنگ و کادرکشیدن دور متن، همراه با گزارهٔ اثرگذاری برابرشان؛ دوازده حامل نشانه یعنی فلش برای جهت کشیدن در اسلایدر و محتوای زیر خط تاشو، دکمه و کلید ضامن و نوار کشویی و چک‌باکس و دکمهٔ رادیویی با حاشیه و سایه و رنگ و شکل مستطیل گردگوشه، رنگ با قرمز خطا و دکمهٔ سبز فراخوان، کنتراست با رنگ و اندازه و شکل حروف، شکل حروف با قلم و اندازه و وزن و سبک و پیوند رنگی یا زیرخط‌دار، آیکون با سبد زباله برای حذف و دوربین برای عکس و خانه برای صفحهٔ اصلی و بی‌نیازی از برچسب در آیکون خوب، فضای سفید برای گروه‌کردن و جداکردن و دادن فضا به عنصر مهم، بافت به‌عنوان بازسازی ظاهر جسم واقعی و سایه‌ای که فشردنی‌بودن دکمه را تأکید می‌کند، حرکت با انیمیشن و ریزتعامل و آیکون تپندهٔ بارگذاری، اثر شناوری با عوض‌شدن رنگ و آمدن زیرخط، پیام بازخورد با تیک سبز موفقیت و ضربدر قرمز خطا، و تصویر با نقش چهرهٔ آدم‌ها در بردن نگاه کاربر؛ چهار گام ساختن نشانهٔ اثرگذار یعنی شناخت کاربر با پیمایش و مصاحبه برای فهم هدف و اطلاعات لازم و نقطه‌درد، تعریف معماری اطلاعات با سازمان‌دادن منطقی و رفتن از کلی به جزئی و برچسب روشن و نگاشت به جریان کار کاربر و ناوبری ساده و یکدست و پرهیز از سطح‌های اضافه و جداکردن چیزهای مهم با رنگ و کنتراست و گروه‌بندی و فضای سفید و اصول گشتالت و استفاده از نظم‌های جاافتادهٔ الفبایی و زمانی و جغرافیایی و کشیدن نقشهٔ سایت و یکدست‌بودنِ همراه با انعطاف، انتخاب نشانهٔ درست با در نظر گرفتن صریح یا ضمنی بودن و سبک و زبان طراحی و پیمایش‌پذیری در چند ثانیه و نشانه‌های جهت مثل فلش و اشاره‌گر و خط نگاه و هم‌خوانی با انتظار کاربر و کارکرد سامانه و برچسب کوتاه و آیکون شناختنی و مقیاس‌پذیر و رنگ دارای کنتراست و ارزیابی نشانه بر پایهٔ مجال‌دادن به کنش و رساندن معنا و گروه‌کردن بر پایهٔ شباهت و نزدیکی و سلسله‌مراتب و نگاشت رابطهٔ عنصر با نتیجه و تعادل تعداد و اندازه و شدت و پرهیز از شلوغی و نوفه و تکرار و رنگ هدفمند با قرمز خطا و سبز موفقیت و آبی اطلاع و آیکون شناخته‌شده مثل ذره‌بین جست‌وجو و سبد خرید پرداخت و پرهیز از آیکون مبهم و هدایت چشم با خط و فلش و کادر و بازخورد دیداری و حرکت هدفمند و در نظر گرفتن کوررنگی و کم‌بینایی و صفحه‌خوان و تکیه‌نکردن تنها بر رنگ، و آزمون و تکرار با کاربر از جمله مقایسهٔ کارکرد نشانه‌ها روی موبایل و دسکتاپ؛ تشبیه در و صفحهٔ فشاری‌اش به‌عنوان نمونهٔ قابلیت انجام کنش و نشانگر؛ و سه توصیهٔ پایانی یعنی یکدستی و سرعت یادگیری رابط، روشنی و دوری از آیکون انتزاعی و پیچیده و رفتن به نشانهٔ صریح در تردید، و استفاده از اصول گشتالت مثل شباهت و نزدیکی و بستار — از این منبع گرفته شده. متن فارسی، ساختار بخش‌ها و همهٔ تحلیل‌ها کاملاً مستقل نوشته شده‌اند.

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

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

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

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

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

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

دربارهٔ من

در این مقاله

  • - تعریف
  • - چرا نشانهٔ بصری اهمیت دارد
  • - صریح در برابر ضمنی
  • - دوازده جایی که نشانه از آن ساخته می‌شود
  • - چهار گام ساختن نشانهٔ اثرگذار
  • - هر نشانه یک جمله می‌گوید
  • - آموخته یا بی‌واسطه
  • - وقتی دو نشانه یکی نمی‌گویند
  • - در بافت فارسی

برچسب‌ها

  • نشانهٔ بصری
  • طراحی رابط
  • نشانگر
  • ترجمه