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

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

هوروور واکویی (Horror Vacui) چیست؟

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

وقتی جای خالی روی صفحه می‌بینید، حس می‌کنید کاری ناتمام مانده. و همین حس، قدیمی‌تر از وب است.

تعریف

هوروور واکویی به تمایل به پرکردن هر تکه از فضای یک صفحهٔ وب یا اپلیکیشن با محتوا گفته می‌شود.

و ترجمهٔ تحت‌اللفظی‌اش از لاتین، «وحشت از خلأ» یا «ترس از تهی‌بودن» است.

و شکل بروزش این‌هاست:

  • - صفحه‌های شلوغ از متن و تصویر و تبلیغ.
  • - فضای منفی کم یا صفر.
  • - ترکیب‌بندی پیچیده و بصری‌گیج‌کننده.
  • - و فراخوان‌های کنشی که زیر عناصر دیگر دفن شده‌اند.

تاریخچه

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

و ماریو پراتز (۱۸۹۶ تا ۱۹۸۲)، منتقد هنر و ادبیات ایتالیایی، این تمایل را رسماً نام‌گذاری و نقد کرد — در طراحی داخلی ویکتوریایی.

و در نقاشی، بوش و بروگل و دووه نمونه‌هایش‌اند. و «سقوط بابل» ژان دووه در ۱۵۵۵ شاخص‌ترین است: تقریباً صد درصد پر از کنش و کنشگر.

و بعد جهت عوض شد. جنبش‌های مدرن از مینیمالیسم به بعد، سادگی را بر انبوهی مقدم دانستند — و ترجیح زیبایی‌شناختی برگشت.

و نکته‌ای که در این تاریخچه هست و ارزش گفتن دارد: پرکردن فضا هرگز یک اشتباه نبود؛ یک زبان بود. در دوره‌ای، جای خالی به‌معنای نداشتن بود — و پرکردنش، نمایش توان.

از باروک تا مینیمالیسم، و شکل بروزش امروز
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

فضای منفی، ابزار مقابله

و ابزار اصلی در برابرش، فضای سفید است. «فضای سفید — یا فضای منفی — ابزار قدرتمندی در مقابله با هوروور واکویی است.»

و چند نکتهٔ عملی دربارهٔ‌ آن:

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

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

کِی پرکردن درست است

و اینجا بخشی است که معمولاً حذف می‌شود: پرکردن فضا همیشه غلط نیست.

در مدل‌های کسب‌وکار کم‌قیمت — والمارت، فروشگاه‌های تک‌قیمت — طراحی شلوغ‌تر می‌تواند به رساندن حس «ارزان» کمک کند.

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

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

و در وب‌سایت‌های خلاق و هنری و فرهنگی هم که کاربر انتظار غنای بصری دارد، جا دارد.

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

نمونه‌ها

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

و آمازون آموزنده‌ترینشان است، چون نشان می‌دهد راه سوم هم وجود دارد. صفحه‌اش متراکم است و آشفته نیست — چون تراکم را با ساختار مهار کرده، نه با حذف.

کِی پرکردن درست است، و راه سوم آمازون
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

هم‌زیستی با مینیمالیسم

و پرسشی که مطرح می‌شود این است که آیا این دو می‌توانند در یک طرح جمع شوند. و پاسخ مثبت است — از راه ناحیه‌بندی دقیق.

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

و برای به‌کاربردن مؤثرش هم چهار قاعده هست:

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

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

دو عدد

پژوهش دانشگاه بازل و گوگل: آدم‌ها جذابیت بصری یک طرح را در کمتر از ۱۷ تا ۵۰ میلی‌ثانیه قضاوت می‌کنند.

اصل پارتو: ۸۰ درصد کاربران فقط از ۲۰ درصد قابلیت‌های یک محصول استفاده می‌کنند.

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

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

و این تفکیک مهم است: شلوغی، انجام کار را ناممکن نمی‌کند؛ آن را ناخوشایند می‌کند. و همین است که در سنجه‌های نرخ تکمیل دیده نمی‌شود.

دسترس‌پذیری در طرح متراکم

و اگر طرح متراکم انتخاب شماست، شش کار لازم می‌شود:

  • - کنتراست و خوانایی را نگه دارید.
  • - سلسله‌مراتب روشن بسازید.
  • - تعامل‌ها را ساده کنید.
  • - ناوبری سازگار داشته باشید.
  • - متن جایگزین برای تصویرها بگذارید.
  • - و با مشارکت‌کنندگان متنوع آزمون کنید.

یک آزمون برای صفحهٔ خودتان

این بخش افزودهٔ من است، چون «شلوغ است» یک قضاوت سلیقه‌ای به‌نظر می‌رسد و می‌شود قابل‌سنجش کرد.

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

و بعد نسبت را بشمارید. اگر بیش از نیمی از سطح صفحه خط خورد، شلوغی شما تزئینی است، نه اطلاعاتی.

و یک آزمون دوم هم هست که سریع‌تر است: صفحه را به کسی نشان دهید و بپرسید «مهم‌ترین چیز روی این صفحه چیست؟»

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

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

چرا شلوغی برمی‌گردد

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

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

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

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

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

در بافت فارسی

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

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

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

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

سه: تبلیغات و بنر، بیشترین سهم شلوغی را دارند. در بسیاری از سایت‌های فارسی، فضای پرشده مال محتوا نیست؛ مال تبلیغ است.

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

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

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

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

جمع‌بندی

  • - هوروور واکویی یعنی تمایل به پرکردن هر تکه از فضای صفحه با محتوا · ترجمه‌اش «وحشت از خلأ» است
  • - ریشه‌اش به دوران ارسطو می‌رسد · در ویکتوریایی و جورجیایی و باروک برجسته شد · ماریو پراتز (۱۸۹۶–۱۹۸۲) نامش را گذاشت و نقدش کرد
  • - «سقوط بابل» ژان دووه در ۱۵۵۵ · تقریباً صد درصد پر · و پرکردن فضا هرگز اشتباه نبود، یک زبان بود
  • - فضای منفی ابزار مقابله است · لازم نیست سفید باشد · و در زیبایی‌شناسی امروزی با تجمل همراه است
  • - پرکردن همیشه غلط نیست: مدل‌های کم‌قیمت · بعضی فرهنگ‌های شرقی · و سایت‌های خلاق و هنری
  • - آمازون راه سوم را نشان می‌دهد: تراکم مهارشده با ساختار، نه با حذف
  • - هم‌زیستی با مینیمالیسم از راه ناحیه‌بندی · تراکم در ناحیه‌ای که تصمیم گرفته نمی‌شود هزینه‌ای ندارد
  • - جذابیت بصری در ۱۷ تا ۵۰ میلی‌ثانیه قضاوت می‌شود · ۸۰٪ کاربران از ۲۰٪ قابلیت‌ها استفاده می‌کنند · و مرفی در ۲۰۲۲: تکلیف تمام می‌شد و تجربه بالا ارزیابی نمی‌شد
  • - شلوغی انجام کار را ناممکن نمی‌کند؛ ناخوشایند می‌کند — و در نرخ تکمیل دیده نمی‌شود
  • - و در فارسی: انتظار تراکم بالاتر است پس عمق را در لایهٔ دوم بگذارید · خط فارسی فضای بیشتری می‌خواهد · بنرها بیشترین سهم شلوغی را دارند · و متن لاتین تراکم ادراک‌شده را بالا می‌برد

منبع

این نوشته «بازنویسی آزاد» است از مطلب What is Horror Vacui? در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف هوروور واکویی و ترجمهٔ تحت‌اللفظی «وحشت از خلأ» و «ترس از تهی‌بودن»، شکل‌های بروزش شامل صفحهٔ شلوغ و فضای منفی کم و ترکیب‌بندی گیج‌کننده و دفن‌شدن فراخوان کنش، ریشه‌اش در دوران ارسطو و برجسته‌شدنش در دوره‌های ویکتوریایی و جورجیایی و باروک به‌عنوان نشانهٔ ثروت و صنعتگری، نام‌گذاری و نقد از سوی ماریو پراتز (۱۸۹۶–۱۹۸۲) منتقد هنر و ادبیات ایتالیایی در طراحی داخلی ویکتوریایی، نمونه‌های نقاشی بوش و بروگل و دووه و «سقوط بابل» ژان دووه در ۱۵۵۵ و پرشدن تقریباً صد درصدی‌اش، تغییر جهت با جنبش‌های مدرن و مینیمالیسم، نقل‌قول دربارهٔ فضای سفید به‌عنوان ابزار مقابله و همهٔ نکاتش شامل لازم‌نبودن رنگ سفید و ساختن فضای تنفس و هدایت توجه و بهبود خوانایی و همراهی با تجمل، همهٔ موارد موجه‌بودن پرکردن فضا شامل مدل‌های کم‌قیمت و والمارت و فروشگاه‌های تک‌قیمت و ادراک «حراج زیرزمینی» در غرب و ادراک ثروت در فرهنگ‌های شرقی و چین و صفحه‌های فرود چینی و سایت‌های خلاق و هنری و گزارهٔ حیاتی‌بودن فهم بافت فرهنگی، همهٔ نمونه‌ها شامل ای‌بی و آمازون و اپل و گوگل و تبلیغات ویکتوریایی کوکاکولا، پاسخ هم‌زیستی با مینیمالیسم از راه ناحیه‌بندی و چهار قاعدهٔ به‌کاربردن مؤثر، پژوهش دانشگاه بازل و گوگل دربارهٔ ۱۷ تا ۵۰ میلی‌ثانیه، اصل پارتو و ۸۰ به ۲۰، مطالعهٔ مرفی در ۲۰۲۲ دربارهٔ وب‌سایت کتابخانه‌های کارولینای شمالی، و شش کار لازم برای دسترس‌پذیری در طرح متراکم — از این منبع گرفته شده. متن فارسی، ساختار بخش‌ها و همهٔ تحلیل‌ها کاملاً مستقل نوشته شده‌اند.

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

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

تصاویر: هیچ تصویری از مطلب اصلی بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.

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

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

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

دربارهٔ من

در این مقاله

  • - تعریف
  • - تاریخچه
  • - فضای منفی
  • - کِی پرکردن درست است
  • - نمونه‌ها
  • - هم‌زیستی با مینیمالیسم
  • - دو عدد
  • - دسترس‌پذیری
  • - یک آزمون
  • - در بافت فارسی

برچسب‌ها

  • هوروور واکویی
  • فضای منفی
  • طراحی بصری
  • UX
  • ترجمه