بنتوباکس در طراحی (Bento Box)

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

طراحی بنتوباکس چیست؟

طراحی بنتوباکس یه سبک از طراحی هستش که از جعبه‌های غذای ژاپنی الهام گرفتن. در این سبک، محتوا در کارت‌ها یا بخش‌های مجزا و منظم چیده می‌شن؛ هر بخش وظیفه معرفی یه ویژگی یا محتوای خاص رو به‌عهده داره. این کارت‌ها مستقل هستن، اما کنار هم یک ترکیب هماهنگ و متعادل می‌سازن. ایده این سبک اول در ویدیوهای تبلیغاتی اپل دیده شد و بعد با معرفی زبان طراحی مترو (Metro Design Language) از طرف مایکروسافت محبوب شد. استفاده از این رویکرد باعث می‌شه صفحه مرتب، واضح و جذاب به‌نظر بیاد و کاربر راحت‌تر بین اطلاعات جابه‌جا بشه.

چه زمانی از طراحی بنتوباکس استفاده می‌شود؟

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

کاربردها و اهمیت طراحی بنتوباکس

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

چطور طراحی بنتوباکس را در طراحی اجرا کنیم؟

• شناسایی ویژگی‌های کلیدی

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

• طراحی شبکه

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

• ایجاد وایرفریم و پروتوتایپ

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

• استفاده از عناصر تصویری و ویدیو

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

• حفظ یکپارچگی بصری

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

• تست و تکرار

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

چالش‌ها و اشتباهات رایج در بنتوباکس

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

مثال‌هایی از طراحی بنتوباکس

• صفحه آیفون ۱۴ پرو

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

• Bolt

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

• Pinterest

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

• Fashion Store Website

وب‌سایت The Fashion Store یک نمونه‌ خوب از استفاده کامل از چیدمان بنتوباکس در کل صفحه‌ست. طراح سایت صفحه رو به چند بخش مختلف تقسیم کرده که هر کدوم اطلاعات متنوعی ارائه می‌دن و درعین‌حال کاربر رو به‌خوبی به بخش‌های عمیق‌تر هدایت می‌کنن. در این طراحی از کنتراست رنگی هم به‌درستی استفاده شده تا هم ظاهر صفحه جذاب‌تر بشه و هم محتوا واضح‌تر دیده بشه.

• Koto Studio

در پروژه طراحی WhatsApp، استودیوی Koto از شبکه بنتوباکسی استفاده کرده تا عناصر برند مثل متن، تصویر، رنگ و آیکون‌ها رو به‌صورت منظم و هماهنگ نمایش بده. این چیدمان خاص، محتوا رو به‌صورت واضح و منسجم نشون می‌ده و میکروانیمیشن‌ها هم کاری می‌کنن که کاربر از لحظه ورود به صفحه بیشتر درگیر بشه.

• Atmosphere FM

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

نتیجه‌گیری

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

منابع

• Medium
• Medium.muz
• mockplus
• arounda agency
• Stan+vision