فرزان بالکانی

بازطراحی (Redesign) صفحه محصول فروشگاه ebay

redesigning_ftw

کمال‌گرایی یا وسواس، اسمش را هرچه بگذاریم، این ویژگی خوب یا بد در من نهادینه شده‌است؛ با این نگرش، می‌توان اثبات کرد که “هر چیزی می‌تواند بهتر شود”. به همین دلیل تصمیم گرفتم تا به شکل عملی، نمونه‌ای کوچک از روند و نتیجه بهینه‌سازی رابط کاربری (User Interface) و تجربه کاربری (User Experience) را به شما نمایش دهم.

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

ebay_original_design

چند نکته مهم درباره این مطلب…

صفحه محصول ebay پر از بخشهای داینامیک است. طبعا به دلیل تعدد و تنوع کالاها و هویت فروشندگان، طراحی آن کار پیچیده‌ای است. در بازطراحی این صفحه، بخش‌هایی را به عمد نادیده گرفتم، مانند تبلیغ پایین ستون راست، هدر، فوتر و توضیحات بیشتر محصول. همانطور که گفتم، تنوع در نمایش المان‌های این صفحه بسیار است. در نتیجه در بازطراحی، ۸۰ درصد از المان‌های موجود در صفجه یک محصول خاص و ۲۰ درصد، از بررسی المان‌های صفحات ده محصول دیگر استفاده کرده‌ام. قلم‌های به‌کار گرفته شده در این طراحی از خانواده‌ی بسیار کامل Helvetica Neue است و از سه وزن میانه (Medium)، نازک (Light) و بسیار نازک (Ultra Light) این خانواده، استفاده شده است. رنگ‌های موجود در طراحی از لوگوی ebay برداشته شده تا هویت بصری این فروشگاه با هویت تجاری آن به شکلی یکدست، ارتباط پیدا کند. آیکون‌های موجود در طراحی (به جز لوگوهای شبکه‌های اجتماعی) همه ساخت خودم است و فقط برای بیان شفاف‌تر المان‌های جدید تولیدشان کرده‌ام. این بازطراحی در کمتر از نصف روز انجام شده است

قدم اول – بررسی

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

قدم دوم – راهکار

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

قدم سوم – اجرا

تغییراتی که انجام دادم:

  • وضعیت دست‌دوم و یا نو بودن کالا می‌تواند تبدیل به یک شکل گرافیکی رنگی شود. درنتیجه با تغییر رنگ و عنوان این شکل، می‌توان وضعیت کالا را ساده‌تر و شفاف‌تر نمایش داد.

Screen Shot 2015-09-16 at 3.56.00 PM

  • دکمه اضافه به Watchlist می‌تواند در کنار آمار مشاهده شده قرار گیرد و از آنجایی که آمار مشاهده در ۲۴ ساعت گذشته برای هر کالا وجود ندارد،‌ می‌توانیم آمار کلی Watchlist را هم در کنار آن قراردهیم.

Screen Shot 2015-09-16 at 3.56.09 PM

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

Screen Shot 2015-09-16 at 3.56.20 PM

  • دکمه اضافه به کلکسیون مفهوم مشابهی با اضافه به سبد خرید دارد. معمولا کاربران از هر‌دو امکان برای نگه‌داری یک محصول (خارج از حافظه شخصی خود) استفاده می‌کنند که بسته به کاربر (و فروشگاه) این مدت کوتاه (در سبدنگه‌داشتن) و یا بلند (اضافه کردن به کلکسیون، علاقه‌مندی‌ها و…) است.

Screen Shot 2015-09-16 at 3.56.37 PM

  • مفاهیم مختلفی در پایین بخش خرید وجود دارند که با تعداد و معانی مختلف، بسته به هر کالا، نمایش داده می‌شوند. می‌توانیم با نمایش بصری بهتر (استفاده از آیکان) و تغییر رنگ مناسب‌تر (زرد کدر/طلای به جای قرمز) این مفاهیم را در ذهن مخاطب ثبت کنیم.

Screen Shot 2015-09-16 at 3.56.52 PM

  • استفاده از آیکون ذره‌بین به جای یک خط نوشته، برای بزرگنمایی تصویر.

Screen Shot 2015-09-16 at 3.57.09 PM

  • طراحی یک دکمه بزرگ (نه به شکلی که دید مخاطب را مختل کند) با عنوانی ترغیب کننده به جای یک دکمه کوچک و متن کوتاه.

Screen Shot 2015-09-16 at 3.57.29 PM

  • با استفاده از وزن‌های مختلف قلم Helvetica و تغییر رنگ به‌جا، به نمایش مرتب‌تری از شرایط ارسال و غیره خواهیم رسید.

Screen Shot 2015-09-16 at 3.57.44 PM

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

Screen Shot 2015-09-16 at 3.58.16 PM

قدم چهارم/آخر – رونمایی

نتیجه نهایی این بازطراحی به شکل زیر است: (نمایش بزرگتر)

ebay_final_redesign

 

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

رفع مسئولیت (Disclaimer)

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

فرزان بالکانی

طراح رابط و تجربه کاربری (UI/UX)، توسعه دهنده وب و همچنین گرافیست سارینا. فرزان بالکانی از سال ۱۳۸۴ طراحی وب را در کنار طراحی گرافیک و ساخت انیمیشن شروع کرد.

  1. سه شنبه، ۱۵ دی ۱۳۹۴ علی
    بسیار عالی بود ! فقط نکته ای که وحد دارع اینه که بهتره کنار هر عکسی که از باز طراحی خودتون گذاشتید عکس حالت فعلی رو هم بذارید تا تفاوت مشخص تر بشه!
    • فرزان بالکانی
      دوشنبه، ۵ بهمن ۱۳۹۴ فرزان بالکانی
      ممنون از نظر شما. به دلیل جابجایی و تغییر کلی در ساختار این طراحی، مقایسه در بسیاری از موارد ممکن نبود. برای همین، تنها راه ممکن مقایسه کلی هر دو نمونه بود.