از شما خواستند برای یک وب‌سایت یا یک برنامه تحت وب صفحه پروفایل طراحی کنید. باید آواتار، اسم، عنوان شغلی و یک مکان را در بر بگیرد. نرم‌افزار Sketch یا Figma را راه می‌اندازید. شاید مداد پیش‌نویس را کنار دستتان بگذارید شاید هم مستقیم بروید سراغ زبان نشانه‌گذاری و شیوه‌نامه آبشاری (CSS).
اسم جعلی‌ای که همیشه از آن استفاده می‌کنید چیست؟
صرف نظر از اینکه چه ابزاری را انتخاب می‌کنید، احتمالاً در آخر باید یک سری مناطق جایگذاری اطلاعات (Placeholder Data) ارائه دهید. آیا شما از آن آدم‌هایی هستید که از اسم خودشان استفاده می‌کنند، یا اسم دوست قدیمی‌تان آقای Lorem Ipsum را استفاده می‌کنید؟ شاید اسم جعلی‌ای داشته باشید که همیشه همان را می‌نویسید، مثلاً Sophia J. Placeholder.
من از نونو بتنکورت استفاده می‌کنم. یا اگر بخواهم رسمی‌تر باشد از نونو دوارته جیل مندس بتنکورت. در یکی از گروه‌های موسیقی اوایل دهه ۹۰، به اسم Extreme، گیتار می‌زد. برای کسانی که جوان‌ترند، باید بگویم او یکی از نوازنده‌هایی بود که با ریحانا به تور می‌رفت. برای کاری که ما می‌خواهیم انجام دهیم هیچ کدام از این‌ها اهمیتی ندارد، به جز اینکه اسم نسبتاً طولانی‌ای دارد.
ممکن است به نظر برسد چیزی که در مناطق جایگذاری اطلاعات (Placeholder Data) می‌نویسید اهمیتی ندارد، چون در نتیجه‌ی نهایی دیده نمی‌شود و فقط یک متغیر است. اما اهمیت دارد. متنی که کار را با آن شروع می‌کنید به صورت غیرمستقیم بر رویکرد شما نسبت به طرح‌بندی (Layout) و سبک (Style) تأثیر می‌گذارد. ممکن است محدوده‌ی حق انتخاب‌هایی که برای خودتان قائل می‌شوید را محدود کند. یا از آن هم خطرناک‌تر، ممکن است باعث شود نتوانید محدودیت‌های واقعی‌ای را که بعداً با آن‌ها مواجه می‌شوید ببینید.
ممکن است چند راه‌حل به ذهنمان برسد: از یک اسم طولانی استفاده کنیم، در طراحی از اطلاعات واقعی استفاده کنیم. اگرچه این برای شروع خوب است، ارزشش را دارد که عمیق‌تر بررسی کنیم این کارها و کارهای دیگر چه طور می‌توانند هم فرایند طراحی شما را بهبود ببخشند و هم به ایجاد نتایج بادوام‌تری منجر شوند.
فقط اسم جعلی نیست!
فقط اسم جعلی نیست؛ آدرس جعلی هم هست! عنوان‌های جعلی! عکس‌های جعلی! وقتی با داده‌های محدود طراحی می‌کنیم، محدودیت‌ها به طراحی‌هایمان راه پیدا می‌کنند.
ناتوانی در برطرف کردن مشکلات رشته‌های طولانی متن یکی از اساسی‌ترین و احتمالاً رایج‌ترین مسائلی است که ممکن است باعث شود کامپوننت‌ها در مواجهه با داده‌های واقعی به درستی کار نکنند. شما فکر می‌کردید این تَب (tab) قرار است “Settings” نامگذاری شود؟ حالا اسمش را گذاشته‌اند “Application Preferences”، و محصول هم قرار است همین فردا لانچ شود!
اندازه‌ی رشته‌های متن فقط یکی از چیز‌هایی است که ممکن است باعث بشود متن و داده‌ی واقعی به یک طراحی بد منجر شوند. بنابراین وقتی سعی می‌کنید کار خودتان را با استفاده از انتخاب مناطق جایگذاری اطلاعات (Placeholder Data) ساده و ابتدایی راحت کنید، موارد زیر را در نظر بگیرید.
عکس‌های پروفایل را در نظر بگیرید.
انتظار نداشته باشید آدم‌ها پرتره‌های استودیویی با زمینه‌ی کاملاً سفید داشته باشند (شک کنید اگر کسی چنین کاری کرده باشد!). افراد بسیاری ممکن است اصلاً تمایل نداشته باشند برای حسابشان عکسی آپلود کنند. بعضی‌ها ممکن است سعی کنند لوگوی بزرگ شرکتشان را در آن مربع کوچک جا دهند. نمی‌توانید همه‌ی داده‌های ممکن را در نظر بگیرید، اما اگر در فرآیند طراحی‌تان پیشاپیش فکر بعضی از این موارد را که از لحاظ بصری ایده‌آل نیستند کرده باشید، خروجی شما انعطاف‌پذیرتر خواهد بود.
تصاویر کوچکِ پیش‌نمایش (Thumbnail) برای ویدئوها و عکس‌ها
همه‌ی تصاویر کوچک نسبت ابعادشان چیزی که شما انتظار دارید نیست. ممکن است بعضی از آن‌ها متن یا تصاویری داشته باشند که با صفحه‌ای که آن‌ها را در برمی‌گیرد هماهنگی نداشته باشد. یکی از مسائل رایجی که مشاهده کرده‌ام این است که بالای صفحه‌ی خانه‌ای که به خوبی طراحی شده لوگوی شرکت به صورتی چشمگیر دیده می‌شود. بعد ویدئویی پخش می‌شود و تصویری که به عنوان پوستر پیش‌فرض ویدئو در نظر گرفته شده هم شامل لوگوی شرکت است. حالا صفحه‌ی خانه‌ی زیبایی دارید که شبیه سالاد لوگو است.
تنوع گسترده در اندازه
حواستان به بخش‌هایی باشد که حاوی فهرست هستند و تعداد موارد این فهرست‌ها ممکن است به طرز معناداری با هم متفاوت باشند. طرح‌بندی‌ای را در نظر بگیرید که در آن چند کارت وجود دارد و هر کدام از کارت‌ها شامل چند برچسب (Tag) می‌شود. ممکن است یک کارت سه برچسب داشته باشد و یک کارت دیگر بیست‌وپنج برچسب. وقتی اندازه‌ی یکی از خانه‌های جدول به شدت با بقیه متفاوت باشد، داده‌های جدولی از لحاظ زیبایی و از لحاظ خوانایی با مشکل مواجه می‌شوند.
عناصر جامانده
ممکن است برای برای هدر (Header) سایت طرح‌بندی خوبی درست کرده باشید که هم روی موبایل خوب نشان داده شود و هم روی صفحه‌ی ۲۷ اینچی. بعد متوجه می‌شوید که باید یک بخش «پشتیبانی» به آن اضافه کنید اما برای آن جا ندارید! من ایجاد یک وایرفریم (Wireframe) را با نوشتن دو فهرست شروع می‌کنم. اولی اهدافی است که بازدیدکننده‌ی این صفحه می‌خواهد به آن‌ها برسد. دومی عناصری است که لازم است روی این صفحه باشند. مطمئن شوید که چیزی را از قلم نینداخته‌اید: از محتوای اولیه تا تبلیغات و لینک حفظ حریم خصوصی در فوتر (Footer). تشخیص وب‌سایتی که موقع طراحی‌اش تبلیغاتی که قرار است نشان بدهد در نظر گرفته نشده کار آسانی است.
اندازه‌ی ناحیه‌ی قابل دید کاربران (Viewport)
از مناطق جایگذاری اطلاعات (Placeholder Data) که فراتر برویم، تمایل داریم طرح‌هایمان را در جالب‌ترین اندازه‌های ناحیه‌ی قابل دید کاربران ارائه کنیم. یا بعضی وقت‌ها طرح‌بندی‌ها را طوری طراحی می‌کنیم تا در سایزی که برای مدلمان انتخاب می‌کنیم عالی به نظر می‌رسند؛ مخصوصاً وقتی با ابزارهایی طراحی می‌کنیم که قاب‌هایی با اندازه‌های ثابت دارند. در گوشه و کنار طراحی مشارکتی، دو مشکل رایج دیده می‌شود: طرح‌بندی‌ای که در موبایل کشیده شده و طرح‌بندی که در دسکتاپ فشرده شده.
طراحی منعطف، ممکن است طراحی دردسترس‌تری باشد!
نمی‌توانیم زمانی طولانی (و مقدار زیادی از پول مشتری‌مان) را صرف کنیم تا همه حالت‌هایی را که ممکن است در آن‌ها به مشکل بربخوریم بررسی کنیم. اما می‌توانیم به تأثیر قابی (Canvas) که در آن کار می‌کنیم، ابزارهایی که به کار می‌گیریم و داده‌هایی که برای آن‌ها طراحی می‌کنیم توجه بیشتری داشته باشیم.
لازم است توجه و آزمایش را بر روی راه‌هایی که به سایت شما دسترسی می یابند و سایت شما از طریق آن راه‌ها دیده می‌شوند، متمرکز کنید. لازم نیست طراحی شما روی هر صفحه‌ای با هر ابعادی عالی دیده شود و هرگز چنین اتفاقی نمی‌افتد. اینکه نخواهید به همه چیز نظارت داشته باشید و در آغوش کشیدن این جریان، بخشی از طراحی وب است.
طراحی منعطف، همچنین می‌تواند طراحی شما را در دسترس‌تر کند. کسانی که اختلالات بینایی دارند (یعنی هر کدام از ما در بخشی از زندگی‌مان) ممکن است صفحه را روی کوچک‌ترین اندازه فونت تنظیم کنند. بقیه ممکن است صفحه را زوم کنند و حتی روی صفحه بزرگ دسکتاپ، از طرح‌بندی‌های واکنش گرایی استفاده کنند که برای دستگاه‌های تلفن همراه در نظر گرفته شده‌اند.
از ایجاد موقعیت ناامیدکننده بپرهیزید!
عوامل متعددی وجود دارند که باعث می‌شوند مشتریان و سهام‌داران انتظاراتی غیرواقعی داشته باشند و از اجرای نهایی ناراضی باشند. با نشان دادن طرح‌هایی که بی‌نقص به نظر می‌رسند به انتظاراتی دامن نزنید که به صورت بالقوه با واقعیت تطابق ندارند؛ مشتری بعداً آن‌ها را کاملاً با داده‌های واقعی می‌سنجد.
اگرچه لازم است افراد را قانع کنید که طرحتان ارزشمند است، اگر تصمیم بگیرید طرحی غیرواقعی را به نمایش بگذارید، حتماً شکست می‌خورید. در عوض، ابتدا کارتان را با نشان دادن طرح‌بندی‌ای با داده‌های ایده‌آل شروع کنید و بعد با استفاده از تفاوت‌هایی که داده‌های دشوار ایجاد می‌کنند نشان بدهید طرح تا چه اندازه بادوام و انعطاف‌پذیر است. این باعث می‌شود افراد هم طرح شما را درک کنند و هم ارزش فرآیند و تخصص شما را.
به خوبی یادم است وقتی بچه بودم کسی که فروشنده دوره‌گرد جاروبرقی بود روی جاروبرقی می‌پرید تا نشان بدهد محصولش چه قدر بادوام است. ما جاروبرقی لازم نداشتیم (اولین ایراد این مدل فروش)، اما آن تصویر را فراموش نکردم. “روی طرح‌هایتان بپرید! آن‌ها را به دیوار بکوبید! آن‌ها را پر از آشغال کنید و نشان بدهید چه قدر خوب سر پا می‌مانند!”
مثلاً، وقتی طرحی را به یک مشتری نشان می‌دهید، بهش نشان دهید چه طور آن طرح خودش را با عرض‌های متفاوت نمایش و اندازه پیش‌فرض فونت‌ها مطابقت می‌دهد. اینکه به مشتری نشان دهید وب‌سایتش به اندازه‌های مرورگر چه واکنشی نشان می‌دهد، به مشتری کمک می‌کند اصرار نداشته باشد طرح‌ها صرفاً برای دستگاه و اندازه‌ای که خودش استفاده می‌کند بی‌نقص باشد. اگر نقطه قوت شما این است که با اسم‌های طولانی روی صفحه‌های پروفایل کنار بیایید، آن را به نمایش بگذارید! این به مشتری شما کمک می‌کند بفهمد به جز آنچه در تصویرِ ثابت قابل دیدن است، ابعاد دیگری از کار (زمان و پول) نیز وجود دارد.
آشغال‌ها را بریزید و چیزهای ارزشمند را بردارید!
یکی از مثل‌های قدیمی علوم کامپیوتر این است: «آشغال‌ها را اضافه کنید و آشغال‌ها را بردارید.» در عوض سعی کنید به این برسید: «آشغال‌ها بریزید و خب… بد نیست.» یکی دیگر از مثل‌هایی که بهتر است یاد بگیرید این است: قانون پاستل (Postel) که به آن اصل استحکام (Robustness principle) هم می‌گویند. یعنی «در آنچه انجام می‌دهید محافظه‌کار باشید و در آنچه از بقیه می‌پذیرید لیبرال باشید.» فرض کنید اگر برادر دوقلوی بدجنستان بخواهد طراحی‌تان را به هم بریزد، چه کار می‌کند؟ شاید بخواهد مرورگر را به سایزی باریک دربیاورد و عنوان‌های خیلی بلندی به آن اضافه کند (آشغال بریزد). طرح شما باید به عرض کم واکنش خوبی نشان دهد و به شکل باشکوهی اندازه فونت عنوان‌های خیلی بلند را کاهش دهد (چیزهای ارزشمند را بردارد).
با تمرین می‌توانید بخشی از این فرآیند را درونی کنید. به صورت غریزی متوجه می‌شوید یک طرح بصری مشخص چه مشکلاتی دارد. به همین صورت متخصصان دسترسی یا بین‌المللی سازی یاد می‌گیرند فوراً مشکلات رایجی را که جهانی بودن طرح‌ها را محدود می‌کند شناسایی کنند. شهود هم می‌تواند به ما کمک کند و هم می‌تواند ما را گمراه کند. حتماً امتحان کنید و ببینید افراد واقعی با محصول شما چه طور کار می‌کنند.
حتی اگر ذهنتان را تربیت کنید که اشتباهات رایج را پیش‌بینی کند و از آن‌ها بپرهیزد، ذهنتان دائم به سمت مسیری کشیده می‌شود که کمترین مقاومت را دارد. مثل ورزشکاران مقاومتی که در ارتفاعات بالا یا با وزنه‌هایی که به قوزک پایشان می‌بندند ورزش می‌کنند، یا بازیکنان حرفه‌ای بیس‌بال که با چوب بیس‌بال سنگین تمرین می‌کنند، ما هم باید به صورت مصنوعی فشار کاری‌مان را افزایش دهیم.
داده‌های واقعی به قدر کافی خوب نیستند
چیزهای زیادی درباره فواید طراحی با داده‌های واقعی گفته شده است. همکارم، دنیل بورکا (Daniel Burka) می‌گوید:
«سعی کنید به پیچیدگی توجه کنید. کار طراحی در دنیای واقعی خیلی سخت است. اگر یک گراف غیرواقعی طراحی می‌کنید، از داده‌های واقعی استفاده کنید. اگر مثلاً وب‌سایتی را دوباره طراحی می‌کنید، فقط بخش‌ها را اضافه و کم نکنید. اگر یک صفحه ورود جذاب و الکی می‌سازید، فراموش نکنید راهی هم برای بازیابی رمز یا نام کاربری فراموش‌شده در نظر بگیرید. نسخه واقعی را بنویسید. طرح نما (لورم ایپسوم) برای تازه‌کارهاست.»
دنیل درست می‌گوید؛ به خصوص درباره بخش‌های رابط (Interface) که در آن‌ها معنی متن‌ها از کاربردشان جدانشدنی هستند. در طراحی بخش‌هایی که ممکن است محتوای بسیار متنوعی را در بربگیرد (مثل عکس و تصویر پروفایل)، بهتر است از داده‌های واقعی استفاده نکنید. از داده‌های واقعی فراتر بروید. با داده‌های دشوار کار کنید. اگر می‌توانید از داده‌های واقعی استفاده کنید، دنبال بدترین نمونه‌ها بگردید. اگر بتوانید با بدترین‌ها کنار بیایید، نمونه‌های رایج آسان خواهند بود.
وقتی یک صفحه‌ی موجود را دوباره طراحی می‌کنید، از داده‌های فعلی و قبلی‌ای که در دسترس هستند بهره ببرید. داده‌ها را به دقت بررسی کنید و بلندترین و کوتاه‌ترین عنوان‌ها را پیدا کنید. اگر در طراحی از تصویر کوچک پیش‌نمایش (Thumbnail) عکس‌ها و ویدئوها استفاده می‌کنید، به صورت تصادفی تعدادی تصویر کوچک واقعی را انتخاب کنید و آن‌هایی را که می‌دانید کار کردن با آن‌ها آسان است کنار بگذارید.
وقتی به داده‌های موجود دسترسی ندارید، و حتی وقتی دسترسی دارید، نمونه‌های دشواری را بسازید. عنوان‌هایی بنویسید که از محدودیت‌هایی که صفحه می‌تواند خودش را با آن‌ها تطبیق دهد فراتر برود. تصویرهای کوچکی بسازید که خودشان مرزبندی و سایه دارند و ببینید با وجود آنچه خودتان برای آنجا طراحی کرده‌اید چه مشکلاتی پیش می‌آید.
بعضی وقت‌ها داده‌های دشوار می‌توانند (و باید) ثابت باشند.
اگرچه طرح شما باید تا آنجا که ممکن است مستحکم باشد، ممکن است بعضی وقت‌ها با مشکلاتی مواجه شوید که دلیلی ندارد به وجود بیایند. هنگام طراحی یک فهرست برای یکی از مشتریان، تمام آرشیوشان را دیدیم و بررسی کردیم تنوع طول عنوان‌ها چه قدر است. کوتاه‌ترین آن‌ها ۸ حرف و بلندترینشان ۳۲۰ حرف داشتند، اما فقط تعداد کمی از آن‌ها بالای ۸۰ حرف داشتند.
با مشتری طرحی ساختیم که نهایتاً عنوان‌های ۸۰ حرفی را در برمی‌گرفت. بعد آن عنوان‌هایی را که در فهرست جا نمی‌گرفتند ویرایش کردیم تا در همان محدوده جا شوند. در نتیجه عنوان‌های بهتری از آب درآمدند.
وقتی با محتوایی سر و کار دارید که شرکت، تیم یا مشتری‌تان آن را مدیریت کرده، ارزش دارد که این کارها را به صورت یک راهنمای سبک (Style Guide) رمزگذاری کنید. لازم نیست همه انرژی‌تان را صرف طراحی با داده‌های دشواری کنید که از اعماق جهنم آمده‌اند بیرون.
بین‌المللی سازی
من این شانس را داشتم که با تیم‌های موزیلا (Mozilla) کار کنم؛ جایی که صفحه‌ها به هشتاد زبان ترجمه می‌شوند. با توجه به تلاش بسیاری که برای بومی‌سازی صورت می‌گرفت، یاد گرفتیم طرح‌بندی‌ها و طرح‌هایی بسازیم که هم حروف غیر لاتین را و هم نوشته‌های راست به چپ را پشتیبانی کنند.
برای پشتیبانی از زبان‌های چپ به راست و راست به چپ صرفاً ایجاد امکان معکوس شدن رشته‌های متنی کافی نیست. تمام ساختار بصری طرح‌بندی و طرح شما باید بتواند به صورت افقی بچرخد. متوجه می‌شوید این و سایر محدودیت‌های مشابه، به جای اینکه محدودیت‌هایی ناامیدکننده باشند، به شما کمک می‌کنند ابرقدرت‌های طراحی را توسعه دهید.
با در نظر داشتن رشته‌های متنی بلندتر در زبان‌هایی مثل آلمانی، بعضی از طراحان فرآیندی را ایجاد کردند که در آن متن لاتین با طولی دو برابر متن مبدا تولید می‌شود. سازمان W3C مقاله‌ای کاربردی درباره نسبت طول معمول رشته‌های متنی در زبان‌های مختلف دارد. حروف بزرگ و کوچک هم ممکن است در بعضی جاها مشکل ایجاد کنند، به خصوص اگر با CSS ایجاد شده باشند.
اگر طراحی شما بر این موارد تکیه دارد:
text-transform: uppercase
text-transform: lowercase
یا دوباره طراحی را اصلاح کنید تا منعطف‌تر باشد یا حروف کوچک و بزرگ را در متن مبدا (به جای CSS) بررسی کنید تا تیم بومی‌سازی بتواند روی حروف کوچک و بزرگ نظارت داشته باشد. یکی از منابع مناسب برای به دست آوردن اطلاعات بیشتر درباره «طراحی به منظور بومی‌سازی» MDN است.
در طول فرآیند طراحی، در رابطه با مناطق جایگذاری اطلاعات حواستان باشد، زیرا ممکن است از دید یک طراح یک سری مسایل دور از ذهنتان بماند و بدون بررسی کردن آن‌ها را پیش ببرید. عدم رعایت این نکات کلیدی، معمولاً کسانی که کمتر شباهتی با شما دارند را بسیار تحت تاثیر قرار می‌دهد.
هر وقت امکانش بود با داده‌های دشوار طراحی کنید
مطالب زیادی درباره این نوشته شده که چه طور ابزار ما می‌توانند به ما کمک کنند با داده‌های واقعی طراحی کنیم (و باید این مطالب خوانده شوند). با توجه به طراحی مدرن و ابزارهای نمونه‌سازی (یعنی نمونه‌های HTML، CSS و JS)، و حتی مدل‌های استاتیک، اگر از همه پتانسیل‌های طراحی استفاده نکنیم خودمان را گول زده‌ایم.
همیشه بین اینکه چیزی را سریع و یا با جزئیات بسیار بسازیم باید تعادل ایجاد کنیم. مثل همه‌ی چیزهای دیگر در طراحی و در وب، این مسئله هم به چیزهای دیگری بستگی دارد؛ به داده‌ها، مخاطب، پروژه و اهداف آن.
برنامه و بودجه بهانه‌های رایجی هستند که می‌آوریم تا اجزای طراحی‌شده قدرتمندتری را ارائه ندهیم؛ به خصوص در پروژه‌های بزرگ‌تر. اما اگر یاد بگیریم در فرآیند اولیه‌ی طراحی از داده‌های دشوارتر استفاده کنیم، در طولانی مدت وقت کمتری از ما گرفته می‌شود.
مثل یک ورزشکار دوی استقامتی که با تمرین در هوای رقیق ارتفاعات پیشرفت می‌کند، با استفاده از داده‌های دشوار از همان شروع کار، طراح ماهرتری می‌شوید. از اینکه طرحِ شما کجا و چه طور ممکن است با مشکل مواجه شود بیشتر آگاهی پیدا می‌کنید و بهتر می‌توانید فرآیند و تصمیم‌هایتان را به دیگران منتقل کنید.
این مقاله، ترجمه‌ای آزاد از مقاله Design with Difficult Data نوشته Steven Garrity است.
