یکی از مواردی که در دیزاین‌سیستم سایت‌های فروشگاهی به اون توجه میشه طراحی کارت‌های محصوله که بطور متناوب در همه جای سایت انتظار میره استفاده شه. زمانی که بتونیم یک کارت محصول رو اونقدر جامع طراحی کنیم که هر جای سایت بشه از قابلیت‌های اون استفاده کرد و نیاز نباشه برای هر فیچری مجدد برگردیم و دیزاین کارت رو تغییر بدیم یا یک کارت جدید بسازیم اینجاست که میتونیم بگیم یک کارت محصول همه فن حریف طراحی کردیم که هم دیزاینر از اون منتفع میشه و هم تیم برنامه‌نویسی که حین پروژه بارها با اون سر و کله میزنه میتونه راحت به جزییات اون کارت دسترسی داشته باشه.
زمانی که میخوایم یک کارت محصول فروشگاهی (و یا هر حوزه‌ی مشابه دیگه) طراحی کنیم لازمه با ذینفعان پروژه و تیم مارکتینگ در موردش صحبت کنیم. در واقع نگاهی که به کارت محصول در پروسه دیزاین سیستم داریم باید نگاه جامعی باشه نه اینکه صرفا یه عکس محصول بزاریم و عنوان و قیمت رو زیرش قرار بدیم و تمام! چون این کارت شالوده دیزاین ما رو در جاهای مختلف دیزاین نشون میده و اگر قبلش در مورد اجزای کارت، با بیزنس هماهنگ نباشیم در حین کار طراحی بارها و بارها به دلیل نبود اطلاعات کافی باید برگردیم و مجددا یه چیز جدید رو به کارت اضافه کنیم و این موضوع یعنی فضاسازی دوباره کارت‌ها، تلف شدن زمان اسپرینت و در نهایت خستگی ناشی از دوباره کاری.
بنابراین از طریق صحبت با ذینفعان و تیم مارکتینگ میایم و نیازهای اونا رو یادداشت میکنیم تا بدونیم چقدر فضا با چه تعداد آیتم برای طراحی اون کارت در نظر بگیریم. شاید در وهله اول به نظر بیاد که زمان بیشتری داره ازمون میبره اما اگر هم ما به عنوان دیزاینر به مشکلات بعدش پی ببریم و هم بتونیم ذینفعان رو نسبت به این مدت زمان توجیح کنیم در بلندمدت به فواید این کار پی میبریم، بماند که افرادی که بعد از ما وارد سیستم میشن هم میتونن با یک نگاه به ساختار کارت‌ها و سایر اجزای دیزاین سیستم متوجه چرایی اون بشن و بدون اتلاف وقت یا ابهامات احتمالی، به توسعه محصول بپردازن. اینجاست که دعای خیر دیگران شامل حال ما میشه ? و تا زمانی که روی محصول کار می‌کنند به نیکی از ما یاد میکنن.
در نظر داشته باشین که قرار نیست یک کارت در یک صفحه مشخص همه جوانب محصول رو در خودش بگنجونه و به تناسب پروژه نیاز هست کارت‌های دیگه‌ای هم ساخته شه. در این مقاله هدف اینه که برای همون یک کارتی که داریم می‌سازیم طوری طراحی کنیم که شامل همه المان‌های مورد نیاز حاصل از بریف پروژه باشه.
اگر کارت‌ها رو بر اساس اجزای اون سطح بندی کنیم به طور معمول یک کارت فروشگاهی در سطح ۱ که ساده‌ترین سطحه شامل عنوان محصول و قیمت محصوله. در سطح ۲ یک کارت فروشگاهی شامل عنوان محصول، درصد تخفیف، قیمت تخفیف‌خورده،، قیمت بعد از تخفیف است:
زمانی که دیتای مورد نظر از بیزنس رو جمع‌آوری کردیم حالا میبینم که یک کارت محصول به اینجا ختم نمیشه و نیازهای بیشتری هم باید برای اون متصور بود. در سطح ۳ کارت محصول طبق دیتای جمع‌آوری شده، نیاز به یک آیکن علاقه‌مندی داریم. پس خود این آیکن باعث میشه ما عنوان کارت رو کوتاه تر کنیم تا تداخلی با آیکن علاقه‌مندی نداشته باشه. در سطح ۴، نیاز به لیبلی داریم که در اون مشخص کنه که اون محصول تک‌سایز شده یا خیر و از چه سایزی تک‌سایزش موجوده:
همونطور که میبینیم وقتی سطح ۱ رو کنار سطح ۴ میزارین متوجه میشیم که چقدر سطح ۴ جامع‌تر طراحی شده. موضوع حتی به اینجا هم ختم نمیشه. با مرور دیتای جمع‌آوری شده به قابلیتی رسیدم که در اون نیاز هست برخی کارت‌ها اشاره کنه که دارای تخفیف شگفت‌انگیز با مدت زمان محدود هستن (این قسمت بر اساس سیاست تیم مارکتینگ در جهت برگزاری کمپین‌های تبلیغاتی طراحی میشه). بنابراین وارد سطح ۵ میشیم. همونطور که در تصویر زیر میبینیم این کارت رو زمانی که طراحی می‌کردم به این نکته دقت کردم که همه محصولات ما قطعا بکگروند سفید ندارند و میتونه در اون کادر محصول با بکگروند خاکستری و در بدترین حالت یک تصویر شلوغ قرار بگیره. بنابراین لیبل شگفت‌انگیز رو طوری طراحی کردم که در هر سه حالت تصویر خودش رو نشون بده.
ما به عنوان طراح قراره که از نگاه حل مسئله به موضوعات نگاه کنیم نه صرفا یک کارت محصولِ کانسپتِ دریبلی رو با تصاویر خوشگل دیزاین کنیم. تفاوت طراحی کاربرپسند در دنیای واقعی با فضای کانسپت در این نکات مشخص میشه بنابراین سعی کنیم که با دید باز و واقع‌گرایانه طراحی کنیم.
به نظر میاد که دیگه این کارت فضایی واسش نمونده که بیزنس بخواد به اون فیچرهایی مثل مقایسه، اشتراک‌گذاری و ... رو در خودش بگنجونه. در نظر داشته باشین که یک کارت با فیچرهای مختلف لزوما کارت خوبی نیست و باید در مورد بودن یا نبودن یک المان در کارت به تصمیم قطعی برسین. چه بسا بر اساس پرسونای هدف لازم باشه صرفا یک نام و قیمت در اون کارت بیاریم و در پرسونای دیگه تا سطح ۵ و یا حتی بیشتر هم پیش بریم.
حالا که یک کارت با همه خصوصیات رو طراحی کردیم فقط کافیه اونو داخل پروژه استفاده کنیم و هر جا قرار به بودن یک المان بود اون لایه رو روشن میکنیم و هر جا قرار به نبودن یک المان بود اون فیچر رو خاموش میکنیم
بطور کلی از این قبیل کارت‌ها در سایت‌های فروشگاهی یا رزرواسیون زیاد میشه مثال زد. سال ۹۶ که در اقامت۲۴ طراح محصول بودم باز هم نگاه به کارت‌ها طبق همین اصول بود فقط تفاوتش در نوع محتوای اون‌ها بود، مثلا در یک بیزنس هتلی چندستاره بودن هتل، قیمت به ازای هر شب، رزرو آفلاین یا آنلاین اون هتل و ... میتونه اهمیت پیدا کنه.
? مشاهده وب‌سایت دایان‌شاپ
⚡️ مشاهده کیس‌استادی دایان‌شاپ
امیدوارم که براتون مفید باشه و با حمایتتون کمک کنید ?? تا بیشتر بتونم از این مدل پست‌ها منتشر کنم.
