https://virgool.io/feed/@javadsaberi طراح محصول fa 2026-06-16 13:35:48 https://files.virgool.io/upload/users/74588/avatar/VkqgKR.png?height=120&width=120 https://virgool.io/@javadsaberi https://virgool.io/@javadsaberi/%D8%A8%D8%A7%D8%B2%DA%AF%D8%B4%D8%AA-%D8%AC%D8%B3%D9%88%D8%B1%D8%A7%D9%86%D9%87-airbnb-%D8%A8%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%B3%DA%A9%DB%8C%D9%88%D9%85%D9%88%D8%B1%D9%81%DB%8C%D8%B3%D9%85-oqxrzlbyfjp0 وقتی صحبت از نوآوری در طراحی رابط کاربری می‌شه، ایر‌بی‌ان‌بی یکی از اولین‌ اسم‌هاییه که به ذهن می‌رسه. شرکتی که شاید برای بسیاری از طراحان محصول، یک آرزو باشه؛ جایی که طراحی‌ها دقیقاً همان‌طور که باید، پیاده‌سازی می‌شن و تجربه کاربر همیشه در اولویت قرار داره.«جالبه بدونید که یکی از هم‌بنیان‌گذاران Airbnb خودش طراحه، برای همین هم رد پای نگاه طراحی‌محور توی خیلی از تصمیمات شرکت دیده می‌شه. توی دمو این ویدئو هم، وقتی محصول رو نشون می‌ده، به بیننده‌ها می‌گه: “به این انیمیشن‌ها دقت کنید، آیکن زنگ طوری طراحی شده که واقعاً انگار زنگ می‌خوره، یا اون آیکن خونه، وقتی انتخابش می‌کنید درش باز می‌شه!” این جزئیات ریزه که تجربه کاربر رو خاص می‌کنه.»—در زمانه‌ای که سال‌هاست دنیای دیزاین در مسیر مینیمالیسم و فلت دیزاین حرکت می‌کنه، وب‌سایت "ایر بی اند بی" در به‌روزرسانی بهار ۲۰۲۵ با یک انتخاب جسورانه، به سبک اسکیومورفیسم برگشته! سبکی که سال‌ها پیش با ظهور فلت دیزاین کنار گذاشته شده بود حالا دوباره با جزئیات واقعی‌گرایانه؛ بافت‌های فیزیکی و سایه‌های عمیق رو زنده می‌کنه و ما رو به اوایل دهه ۲۰۱۰ و سبک محبوب اسکیومورفیسم می‌بره."طراحی گرم، واقعی و ملموس، در برابر دنیای سرد و یکنواخت فلت."در دیزاین جدید Airbnb، دکمه‌ها حس فیزیکی دارند، کارت‌ها عمق پیدا کرده‌اند، و حتی به شکل نامحسوس تب‌ها با افکت‌هایی مثل کاغذ، چرم و شیشه الهام گرفتند. سبک اسکیومورفیسم برگشته اما نه از سر نوستالژی، بلکه برای بازآفرینی یک رابطه عاطفی بین کاربر و محصول چرا که دنیای دیجیتال، حالا بیشتر از هر وقت دیگه‌ای، دنبال لمس واقعیه.—واقعیت اینه که دیزاین جدید Airbnb کاملاً “اسکیومورفیسم کلاسیک” نیست، ولی به‌شکل محسوسی الهام‌گرفته از اسکیومورفیسم مدرن (neo-skeuomorphism) یا اون چیزی که بعضی‌ها بهش “نئومورفیسم نرم‌” یا “تاکتیل دیزاین” می‌گن هست، یعنی حس لمس رو تداعی می‌کنه بدون اینکه پیچیدگی بصری بیاره. در واقع Airbnb داره نسخه‌ی بالغ‌تری از اون سبک رو ارائه می‌ده، جایی بین فلت دیزاین و اسکیومورفیسم، با نگاهی معاصر و هوشمندانه.—برای درک بهتر این موضوع بهتره اونا رو مقایسه کنیم:| اسکیومورفیسم کلاسیک (مثل iOS 6 و قبلش):• شبیه‌سازی مستقیم دنیای فیزیکی: دفترچه یادداشت چرمی، صفحه چوبی، دکمه فلزی• استفاده زیاد از بافت‌ها، سایه‌های تند، گرادیان‌های غلیظ| دیزاین جدید Airbnb:• استفاده از عمق، نورپردازی واقع‌گرایانه، سایه‌های نرم و افکت‌های تاکتیل (قابل لمس) اما بدون بافت‌های واقعی مثل چرم و چوب• دکمه‌هایی با حس “فیزیکی” اما مینیمال• بسیار منظم‌تر، شفاف‌تر و با زبان طراحی مدرن هماهنگ‌تر—حالا به نظرتون آیا این سبک از طراحی می‌تونه شروعی باشه برای موج جدیدی از دیزاین‌های واقع‌گرا در آینده؟ آیا وقتشه طراحی‌ها دوباره “قابل لمس” بشن یا همچنان مسیر فلت دیزاین کارایی بیشتری در محصولات دیجیتال داره؟—لینک ویدئو معرفی Airbnb—تقدیم به نگاه پرمهر شما:www.airbnb.com جواد صابری Javad Saberi جواد صابری Javad Saberi Thu, 15 May 2025 09:56:58 +0330 https://virgool.io/@javadsaberi/%D8%AA%D9%88%D8%AC%D9%87-%D8%A8%D9%87-%D8%AC%D8%B2%D8%A6%DB%8C%D8%A7%D8%AA-%D8%A8%D8%B1%DA%AF-%D8%A8%D8%B1%D9%86%D8%AF%D9%87-%DB%8C-%D9%85%D8%AD%D8%B5%D9%88%D9%84-kxbrrbu6nenf اون سال‌ها (۱۳۹۶) که تیم لید #طراحی_محصول #اقامت_۲۴ بودم علاوه بر تمرکز روی محصول، روی جنبه‌های بصری سایت هم کار می‌کردم. تا ۵ ۶ سال پیش حداقل توی #اکوسیستم_مشهد اونقدر دپارتمان‌های گرافیک و محصول تفکیک شده نبود و یک #طراح باید به همه جوانب محصولی علاوه بر اینکه فکر می‌کرد، اون رو اجرا هم می‌کرد. خداروشکر طی این سال‌ها ضرورت تخصصی شدن حوزه‌های #دیزاین بیشتر احساس شده و تقریبا تمام شرکت‌های سطح متوسط به بالا دپارتمان‌های تخصصی خودشون رو در سازمان ایجاد کردند.attention to details, the winning card of the productیادمه زمانی که مراحل مرتبط با #تحقیقات_کاربر رو انجام دادم و #بازطراحی سایت #اقامت۲۴ رو شروع کردم هدفم این بود طوری دیزاین کنم که هر کاربری وارد سایت می‌شه یک المان مهم از شهر خودش یا شهر مقصدش توجهشو جلب کنه و به #رزروهتل سوق پیدا کنه؛ یا به قول بچه‌های مارکتینگ اولین جرقه لید رو توی سایت ایجاد کنه.روی این سناریو متمرکز شدم و خیلی دوس داشتم این ایده عملی شه اما حجم کارها اونقدر زیاد بود که نمیرسیدم خودم اجراش کنم و نبود یه دپارتمان گرافیک مجزا هم مزید بر علت بود. از اونجایی که همیشه وجه بصری یک سایت برام حائز اهمیت بود علیرغم همه کارهایی که داشتم هر روز یه تایمی رو خالی می‌کردم واسه این ایده. نشستم المان‌های شهرهای ایران رو با کیفیت بالا از گوگل دانلود کردم و به دوربری تصاویر پرداختم تا بتونم در نهایت المان‌ها رو بصورت پی ان جی کنار هم بچینم. (از سعید مقدم عزیز که تازه به تیم دیزاینمون اضافه شده بود هم برای این کار کمک گرفتم).مودبورد مرتبط با المان‌های شهری ایران بعد از دوربری تصاویرپروسه چیدمان دوربری فضاسازی و نورپردازی همه المان ها سه هفته‌ای زمان برد و همسو دیزاین سایر صفحات سایت #رزرو_هتل هم پیش می‌رفت. بعد سه هفته غیر مفید نتیجه این بنر خیلی حالمو خوب کرد و اون مخ مخه ای که ای کاش این ایده عملی می‌شد دیگه سراغم نیومد ? .چیدمان المان‌ها، فضاسازی و نورپردازی المان‌های شهریشاید اگر همون سال ۹۶ بیخیال عملی کردن این ایده می‌شدم الان سایت اقامت۲۴ یه بک خاکستری سفید یا یه پترن طوری داشت ولی بعد گذشت ۵ سال از بیرون اومدنم، خیلی خوشحالم که هنوز هم این بنر داره وظیفه‌شو به درستی برای کاربرانش انجام می‌ده. به مرور زمان تیم طراحی محصول بزرگ و بزرگ‌تر شد و در میانه سال ۹۶، رفقای دیگه‌ای به تیم پیوستند.سایت اقامت۲۴ بدون بنر هیروسکشنسایت اقامت۲۴ همراه با بنر هیروسکشن? مشاهده وب‌سایت اقامت۲۴⚡️ مشاهده کیس‌استادی اقامت۲۴پ.ن : به عنوان یک #طراح_محصول توجه به جزئیات رو دست‌کم نگیرید. گاهی یک ایده یک یا بهبود ساده می‌تونه تأثیرات بسزایی در #برندینگ یک سایت، افزایش #نرخ_تبدیل ،افزایش #نرخ_فروش و سایر متریک‌ها ایجاد کنه.#producttips| www.afroo.ir | جواد صابری Javad Saberi جواد صابری Javad Saberi Sat, 29 Apr 2023 13:54:42 +0330 https://virgool.io/@javadsaberi/-%DB%8C%DA%A9-%DA%A9%D8%A7%D8%B1%D8%AA-%D9%85%D8%AD%D8%B5%D9%88%D9%84-%D9%87%D9%85%D9%87-%D9%81%D9%86-%D8%AD%D8%B1%DB%8C%D9%81-%D8%AF%D8%B1-%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-jq1cxgpveggx یکی از مواردی که در دیزاین‌سیستم‌ سایت‌های فروشگاهی به اون توجه میشه طراحی کارت‌های محصوله که بطور متناوب در همه جای سایت انتظار میره استفاده شه. زمانی که بتونیم یک کارت محصول رو اونقدر جامع طراحی کنیم که هر جای سایت بشه از قابلیت‌های اون استفاده کرد و نیاز نباشه برای هر فیچری مجدد برگردیم و دیزاین کارت رو تغییر بدیم یا یک کارت جدید بسازیم اینجاست که میتونیم بگیم یک کارت محصول همه فن حریف طراحی کردیم که هم دیزاینر از اون منتفع میشه و هم تیم برنامه‌نویسی که حین پروژه بارها با اون سر و کله میزنه میتونه راحت به جزییات اون کارت دسترسی داشته باشه.An amazing card in design systemزمانی که میخوایم یک کارت محصول فروشگاهی (و یا هر حوزه‌ی مشابه دیگه) طراحی کنیم لازمه با ذینفعان پروژه و تیم مارکتینگ در موردش صحبت کنیم. در واقع نگاهی که به کارت محصول در پروسه دیزاین سیستم داریم باید نگاه جامعی باشه نه اینکه صرفا یه عکس محصول بزاریم و عنوان و قیمت رو زیرش قرار بدیم و تمام! چون این کارت شالوده دیزاین ما رو در جاهای مختلف دیزاین نشون میده و اگر قبلش در مورد اجزای کارت، با بیزنس هماهنگ نباشیم در حین کار طراحی بارها و بارها به دلیل نبود اطلاعات کافی باید برگردیم و مجددا یه چیز جدید رو به کارت اضافه کنیم و این موضوع یعنی فضاسازی دوباره کارت‌ها، تلف شدن زمان اسپرینت و در نهایت خستگی ناشی از دوباره کاری. بخشی از دیزاین سیستم طراحی شده برای فروشگاه اینترنتی دایان‌شاپ - کارت‌ها بنابراین از طریق صحبت با ذینفعان و تیم مارکتینگ میایم و نیازهای اونا رو یادداشت میکنیم تا بدونیم چقدر فضا با چه تعداد آیتم برای طراحی اون کارت در نظر بگیریم. شاید در وهله اول به نظر بیاد که زمان بیشتری داره ازمون میبره اما اگر هم ما به عنوان دیزاینر به مشکلات بعدش پی ببریم و هم بتونیم ذینفعان رو نسبت به این مدت زمان توجیح کنیم در بلندمدت به فواید این کار پی میبریم، بماند که افرادی که بعد از ما وارد سیستم میشن هم میتونن با یک نگاه به ساختار کارت‌ها و سایر اجزای دیزاین سیستم متوجه چرایی اون بشن و بدون اتلاف وقت یا ابهامات احتمالی، به توسعه محصول بپردازن. اینجاست که دعای خیر دیگران شامل حال ما میشه ? و تا زمانی که روی محصول کار می‌کنند به نیکی از ما یاد میکنن.در نظر داشته باشین که قرار نیست یک کارت در یک صفحه مشخص همه جوانب محصول رو در خودش بگنجونه و به تناسب پروژه نیاز هست کارت‌های دیگه‌ای هم ساخته شه. در این مقاله هدف اینه که برای همون یک کارتی که داریم می‌سازیم طوری طراحی کنیم که شامل همه المان‌های مورد نیاز حاصل از بریف پروژه باشه.اگر کارت‌ها رو بر اساس اجزای اون سطح بندی کنیم به طور معمول یک کارت فروشگاهی در سطح ۱ که ساده‌ترین سطحه شامل عنوان محصول و قیمت محصوله. در سطح ۲ یک کارت فروشگاهی شامل عنوان محصول، درصد تخفیف، قیمت تخفیف‌خورده،، قیمت بعد از تخفیف است:سطح ۱ و سطح ۲ در طراحی کارت محصولزمانی که دیتای مورد نظر از بیزنس رو جمع‌آوری کردیم حالا میبینم که یک کارت محصول به اینجا ختم نمیشه و نیازهای بیشتری هم باید برای اون متصور بود. در سطح ۳ کارت محصول طبق دیتای جمع‌آوری شده، نیاز به یک آیکن علاقه‌مندی داریم. پس خود این آیکن باعث میشه ما عنوان کارت رو کوتاه تر کنیم تا تداخلی با آیکن علاقه‌مندی نداشته باشه. در سطح ۴، نیاز به لیبلی داریم که در اون مشخص کنه که اون محصول تک‌سایز شده یا خیر و از چه سایزی تک‌سایزش موجوده:سطح ۳ و سطح ۴ در طراحی کارت محصولهمونطور که میبینیم وقتی سطح ۱ رو کنار سطح ۴ میزارین متوجه میشیم که چقدر سطح ۴ جامع‌تر طراحی شده. موضوع حتی به اینجا هم ختم نمیشه. با مرور دیتای جمع‌آوری شده به قابلیتی رسیدم که در اون نیاز هست برخی کارت‌ها اشاره کنه که دارای تخفیف شگفت‌انگیز با مدت زمان محدود هستن (این قسمت بر اساس سیاست تیم مارکتینگ در جهت برگزاری کمپین‌های تبلیغاتی طراحی میشه). بنابراین وارد سطح ۵ میشیم. همونطور که در تصویر زیر میبینیم این کارت رو زمانی که طراحی می‌کردم به این نکته دقت کردم که همه محصولات ما قطعا بکگروند سفید ندارند و میتونه در اون کادر محصول با بکگروند خاکستری و در بدترین حالت یک تصویر شلوغ قرار بگیره. بنابراین لیبل شگفت‌انگیز رو طوری طراحی کردم که در هر سه حالت تصویر خودش رو نشون بده.ما به عنوان طراح قراره که از نگاه حل مسئله به موضوعات نگاه کنیم نه صرفا یک کارت محصولِ کانسپتِ دریبلی رو با تصاویر خوشگل دیزاین کنیم. تفاوت طراحی کاربرپسند در دنیای واقعی با فضای کانسپت در این نکات مشخص میشه بنابراین سعی کنیم که با دید باز و واقع‌گرایانه طراحی کنیم.سطح ۵ در طراحی کارت محصولبه نظر میاد که دیگه این کارت فضایی واسش نمونده که بیزنس بخواد به اون فیچرهایی مثل مقایسه، اشتراک‌گذاری و ... رو در خودش بگنجونه. در نظر داشته باشین که یک کارت با فیچرهای مختلف لزوما کارت خوبی نیست و باید در مورد بودن یا نبودن یک المان در کارت به تصمیم قطعی برسین. چه بسا بر اساس پرسونای هدف لازم باشه صرفا یک نام و قیمت در اون کارت بیاریم و در پرسونای دیگه تا سطح ۵ و یا حتی بیشتر هم پیش بریم. حالا که یک کارت با همه خصوصیات رو طراحی کردیم فقط کافیه اونو داخل پروژه استفاده کنیم و هر جا قرار به بودن‌ یک المان بود اون لایه رو روشن می‌کنیم و هر جا قرار به نبودن‌ یک المان بود اون فیچر رو خاموش می‌کنیمبطور کلی از این قبیل کارت‌ها در سایت‌های فروشگاهی یا رزرواسیون زیاد میشه مثال زد. سال ۹۶ که در اقامت۲۴ طراح محصول بودم باز هم نگاه به کارت‌ها طبق همین اصول بود فقط تفاوتش در نوع محتوای اون‌ها بود، مثلا در یک بیزنس هتلی چندستاره بودن هتل، قیمت به ازای هر شب، رزرو آفلاین یا آنلاین اون هتل و ... می‌تونه اهمیت پیدا کنه.یک کارت محصول همه فن حریف در مقابل یک کارت معمولی? مشاهده وب‌سایت دایان‌شاپ⚡️ مشاهده کیس‌استادی دایان‌شاپامیدوارم که براتون مفید باشه و با حمایتتون کمک کنید ?? تا بیشتر بتونم از این مدل‌ پست‌ها منتشر کنم.#producttips| www.afroo.ir | جواد صابری Javad Saberi جواد صابری Javad Saberi Tue, 20 Sep 2022 10:26:04 +0430 https://virgool.io/@javadsaberi/%EF%B8%8F-%D8%A2%DB%8C%DA%A9%D9%86-%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86-%D8%A8%D9%87-%D8%B3%D8%A8%D8%AF-%D8%AE%D8%B1%DB%8C%D8%AF%D8%8C-%DB%B2-%DA%A9%D8%A7%D9%84%D8%A7-%DB%8C%D8%A7-%DB%B3-%DA%A9%D8%A7%D9%84%D8%A7-%D8%AF%D8%B1-%D8%B3%D8%A8%D8%AF!-qnr5tppmbhqx بنچمارک در پروسه دیزاین، ذهن دیزاینر رو نسبت به چیزهایی که احیانا در نظر نگرفته و یا به خاطر حجم بالای پروژه در اون مقطع کنونی، نمیتونسته تمرکز داشته باشه، باز میکنه و ایده‌های جدیدی رو به اون منتقل میکنه. حال که بنچمارک در خدمت دیزاین در میاد باید نسبت به بیزنسی که داریم دیزاین می‌کنیم، اون ایده‌ها رو تحلیل کنیم و ببینیم آیا مناسب پرسونای هدف ما هست و یا نیاز به چکش‌کاری داره تا به یک نتیجه قابل قبول برسه.Mini cart container, 2 item or 3 item in the Shopping Cartطی پروسه طراحی که برای صفحه سبد خرید دایان‌شاپ داشتم چند سایت فروشگاهی رو مورد بررسی قرار دادم تا با سوال بزرگی که در ذهنم ایجاد شده بود بتونم به بهترین پاسخ برسم. تا حالا به این فکر کردین که وقتی یک کالا رو به سبد اضافه میکنین و تعدادش رو ۲ می‌کنین، عدد شمارنده سبد خرید باید بشه ۱ یا ۲؟ رفتم سراغ دو سایت معتبر ایرانی در حوزه فروشگاهی یعنی دیجی استایل و دیجی کالا و یک رفتار خرید رو برای هر دوی اون‌ها تست کردم. نتیجه تست جالب بود:منطق سایت دیجی استایل در مورد آیکن سبد خریدتوی تصویر زیر همون‌طور که میبینین من دو کالا به سبد دیجی استایل اضافه کردم و دیجی استایل عدد ۲ رو در شمارنده نشون داد. اما وقتی به تعداد لباس اضافه کردم باز هم شمارنده، عدد ۲ باقی موند.دیجی استایل منطق شمارنده سبد خرید رو بر اساس کد کالا تغییر میده. یعنی میگه برای ما کد کالا ملاکه. اگر شما از یک کالا تعداد ۱۰ تا هم انتخاب کنی چون اون آیتم یک کد کالا حساب میشه توی شمارنده ما همون ۱ کالا رو نشون میدیم. بنابراین با این که ۲ لباس و ۱ کفش در سبد هست اما چون ۲ کد کالا کلا داریم عدد شمارنده ۲ هست نه ۳.منطق سایت دیجی استایل در مورد آیکن سبد خرید - نشان دادن عدد ۲ در ایکن سبد خریدمنطق سایت دیجی کالا در مورد آیکن سبد خریددر ادامه توی تصویر زیر هم دو کالا به سبد دیجی کالا اضافه کردم و دیجی کالا عدد ۲ رو در شمارنده نشون داد. اما وقتی به تعداد لباس‌ها اضافه کردم شمارنده به عدد ۳ تغییر کرد.دیجی کالا منطق شمارنده سبد خرید رو بر اساس تعداد کالا تغییر میده. یعنی میگه برای ما تعداد کالا ملاکه. اگر شما از یک کالا تعداد ۱۰ تا انتخاب کنی در واقع ۱۰ کالا داری. بنابراین اگر ۲ لباس و ۱ کفش در سبد هست عدد شمارنده برابر است با ۳.منطق سایت دیجی کالا در مورد آیکن سبد خرید - نشان دادن عدد ۳ در آیکن سبد خریدمشخصا هر دو منطق دیجی استایل و دیجی کالا بر اساس فرضیاتی که در نظر گرفتند درسته. یکی بر اساس کد کالا و دیگری بر اساس تعداد کالا اومدن شمارنده رو پیاده‌سازی کردند. اما این دوگانگی، منو به جواب درست نمیرسوند که بالاخره کدوم روش منطقی تره. برای اینکه به پاسخ اصولی برسم با دوست عزیزم سروش اصفهانی از بچه های طراحی محصول در دایان مشورت کردم. موضوع رو باهش مطرح کردم و نشستیم و سناریوهای مختلفی رو بررسی کردیم و در نهایت به این رسیدیم که منطق دیجی کالا درست تره. برای توضیح کامل این استدلال باید به روش خرید فیزیکی مشتریان در فروشگاه‌ها دقت کنیم.به عنوان مثال طبق تحقیقات انجام شده مشخص شده که مخاطبان هنگام ورود به فروشگاه، بیشتر به محصولات سمت راست خودشون نگاه می‌کنند و خریدهاشون رو اغلب از قفسه‌های این سمت انجام می‌دهند. اطلاعات منتشر شده از این تحقیق باعث شد تا بسیاری از فروشگاه‌های زنجیره‌ای، (حتی در ایران) محصولات پرسود خودشون رو در قفسه‌های سمت راست ورودی فروشگاه قرار بدند.همین رفتار رو برای سبد خرید در فروشگاه‌های فیزیکی در نظر بگیرین. زمانی که خریدار یک لباس مثلا سایز S رو داخل سبدش میزاره در واقع ۱ کالا وارد سبد خریدش کرده ?? و بالطبع شمارنده باید عدد ۱ رو نشون بده. حالا فرض کنین خریدار از همون لباس سایز S، یکی دیگه هم میخواد ??، بنابراین اگر به دید یک فروشگاه واقعی نگاه کنیم خریدار میاد و یک لباس دیگه از همون سایز رو داخل سبد میندازه. پس چیزی که توی سبدش داره میبینه ۲ لباس با سایز S هست. منطق دیجی استایل در سبد خرید از این حیث جای ایراده که تطابقی با دنیای واقعی نداره و صرفا بر اساس منطق یک فروشگاه آنلاین به قضیه نگاه کرده. هر چند که من در دیجی استایل نبودم و نمیدونم که آیا منطق دیگه ای هم برای اون متصور هستند یا خیر. اما برای اینکه مطمئن میشدم که دیجی استایل مطابق با پرسونای فروشگاه دایان‌شاپ نمیتونه انتخاب شه از زاویه دیگه ای هم به موضوع نگاه کردم.انتخاب تعداد ۵ جوراب از یک محصولدر تصویر بالا، من از یک کد جوراب، ۵ تا به سبد اضافه کردم اما هر بار که کالا به سبد اضافه می‌کردم عدد آیکن سبد خرید همون ۱ باقی میموند و من به شخصه احساس میکردم چیزی به سبدم اضافه نمیشه! بعد که مودال سبد رو باز کردم دیدم نوشته ۱ کالا در سبد با تعداد ۵ تا از همون کالا. این تجربه کاربری زیاد خوشایند من نبود. چه بسا که کاربر عادی اصلا متوجه همون تعداد ۵ هم به اون کوچیکی نشه. بماند که اصلا آیا کاربر مودال رو باز میکنه که ببینه توش چه خبره یا نه.انتخاب منطق سبد خرید دیجی‌کالاجمع بندی نهایی اینکه سناریوهای مختلفی رو میشه در سایت های فروشگاهی بررسی کرد که هر کدومشون احتمالا بر اساس دلایل و منطق‌های بیزنس‌شون میتونه صحیح‌ترین روش باشه؛ چه بسا روش یک فروشگاه با فروشگاه دیگه بر اساس زیرساخت‌ها و دیتابیس‌هاشون متفاوت باشه. مهم اینه که از طریق تحلیل رقبا و شناسایی نیازها، طبق پروسه‌ای که برای محصول طی کردیم بهترین چارچوب رو برای محصولمون در نظر بگیریم تا در نهایت از طریق تست‌های کاربردپذیری به درستی یا ابهام حاصل از نتیجه کارمون پی ببریم.? مشاهده وب‌سایت دایان‌شاپ⚡️ مشاهده کیس‌استادی دایان‌شاپامیدوارم که براتون مفید باشه و با حمایتتون کمک کنید ?? تا بیشتر بتونم از این مدل‌ پست‌ها منتشر کنم.#producttips| www.afroo.ir | جواد صابری Javad Saberi جواد صابری Javad Saberi Wed, 14 Sep 2022 17:02:24 +0430 https://virgool.io/@javadsaberi/%22%D9%81%D9%82%D8%B7-%DA%A9%D8%A7%D9%84%D8%A7%D9%87%D8%A7%DB%8C-%D9%85%D9%88%D8%AC%D9%88%D8%AF%22-%D8%AF%D8%B1-%D9%81%DB%8C%D9%84%D8%AA%D8%B1%D9%87%D8%A7%D8%8C-%D8%B3%D9%88%DB%8C%DB%8C%DA%86-%D8%A8%D8%A7%D8%AA%D9%86-%DB%8C%D8%A7-%DA%86%DA%A9-%D8%A8%D8%A7%DA%A9%D8%B3!-vclgvdhvzx0x دیزاین صفحه فیلترها رو طوری فضاسازی کرده بودم که سوییچ باتنِ "فقط‌ کالاهای تخفیف‌دار"، بعد از قسمت "مرتب‌سازی بر اساس" در انتهای گرید قرار بگیره تا فضای بهینه و یکپارچه‌ای بین دو طرف بوجود بیاد. به این ترتیب کاربر از فیلترهای اصل در ستون سمت راست و از گزینه های مرتب سازی و سوییچ باتن در بالای کارت های محصول میتونست استفاده کنه.Only available items, switch buttons or check boxesتوی وایرفریم اولیه گزینه "فقط کالاهای موجود" رو داشتیم اما بنا به دلیلی توی دیزاین حذفش کردم. دلیلش این بود که چون در برخی کتگوری‌ها اونقدر محصول وجود نداشت، کاربر با روشن کردن سوییچ "فقط کالاهای موجود" عملا به صفحات خالی و بدون نتیجه می‌رسید. و خب طبق این استدلال این قابلیت رو تا زمانی که محصولات اون کتگوری به تعداد قابل قبولی برسه، برداشتم تا توی جلسه دمو در موردش با ذینفعان صحبت کنم و منطق "ناموجود" رو طوری در نظر گرفتم که همیشه کالاهای موجود رو ببینه و در انتها برسه به "کالاهای ناموجود".چون سایت دایان شاپ تخفیف های خوبی روی کالاها داره تصمیم گرفتم به جای "فقط کالاهای موجود" از "فقط کالاهای تخفیف‌دار" استفاده کنم تا قابلیت سوییچ رو به‌ گونه‌ای دیگه نشون بدم و به کاربر بگیم که اگه بخوای میتونی فقط کالاهای تخفیف داری که دنبالش هستی رو ببینی ? . توی جلسه دمو دلایلمو برای این کار توضیح دادم و ذینفعان از این ایده استقبال کردند و گفتند این که کاربر بتونه فقط کالاهای تخفیف دار رو ببینه قابلیت جالبیه و این شد که این قابلیت رو توی قسمت فیلترها فیکس کردم.سوییچ باتن "فقط کالاهای تخفیف‌دار" در قسمت بالای کارت‌هاهمه چی داشت خوب پیش میرفت که ذینفعان عزیز گفتن قابلیت "فقط کالاهای موجود" هم باشه ولو اینکه کاربر نتیجه خالی ببینه ? . با این تصمیم ذینفعان، چالش اینکه دو سوییچ باتن رو چطوری در صفحه فیلترها قرار بدم فکرمو درگیر کرد. چون از طرفی یک سوییچ باتن در بالای کارت ها داشتم و نمیشد یکی دیگه کنارش گذاشت و از طرفی نمیشد یکی رو اون بالا بزارم یکی رو اون کنار توی ستون سمت راست.با خودم گفتم چون همه گزینه های ستون سمت راست حالت چک باکس داره بیام، و قابلیت "فقط کالاهای موجود" رو هم بصورت چک باکس کنار فیلترهای سمت راست نشون بدم:قرار دادن چک باکس "فقط کالاهای موجود" در ستون سمت راستیک بوم و دوهوا شنیدین؟ توی عکس کاملا مشهوده . ماهیتِ "فقط کالاهای موجود" با ماهیتِ "فقط کالاهای تخفیف‌دار" یکیه و نمیشه یکیشون با سوییچ باتن بیاد یکیشون با چک باکسیک بوم و دو هوا به روایت تصویرراهکار صحیحی که به ذهنم رسید این شد که هر دو باید از یک جنس باشند یا سوییچ باتن یا چک باکس و نظر خودم روی سوییچ باتن بود. در مورد فضاسازی این دو قابلیت با سعید علیپور دوست عزیزم که مهندس تجربه کاربر دیوار هست صحبت کردم، این که یک سوییچ باتن در ستون سمت راست باشه و یکی در بالای کارت ها کاربر رو گیج نمیکنه؟ (با اینکه از لحاظ تجربه کاربری میدونستم که دارم اشتباه میکنم اما باز هم میخواستم مطمئمن شم). سعید در پاسخ گفت دقیقا این که یکی بالا باشه یکی راست کاربر رو اذیت میکنه و کاربر ترجیح میده همه فیلترها رو یکجا ببینه ، نه یکی رو راست ببینه یکی رو یه جا دیگه.بنابراین تصمیم گرفتم که این دو قابلیت رو بصورت سوییچ باتن در ستون سمت راست نشون بدم و از قسمت بالای کارت ها حذف کنم. و اون جای خالی بالای کارت رو با نشون دادن تعداد نتایج فیلتر پر کنم. حاصل این پروسه کاربری رو در تصویر زیر میتونید ببینید.قرارگیری دو سوییچ باتن در ستون سمت راست? مشاهده وب‌سایت دایان‌شاپ⚡️ مشاهده کیس‌استادی دایان‌شاپامیدوارم که براتون مفید باشه و با حمایتتون کمک کنید ?? تا بیشتر بتونم از این مدل‌ پست‌ها منتشر کنم.#producttips| www.afroo.ir | جواد صابری Javad Saberi جواد صابری Javad Saberi Thu, 25 Aug 2022 15:34:18 +0430 https://virgool.io/@javadsaberi/%D9%85%D8%AD%D8%AF%D9%88%D8%AF%D9%87-%D9%82%DB%8C%D9%85%D8%AA-%D8%AF%D8%B1-%D9%81%DB%8C%D9%84%D8%AA%D8%B1%D9%87%D8%A7-%D8%A7%D8%B9%D8%AF%D8%A7%D8%AF-%D8%B1%D9%8F%D9%86%D8%AF-%DB%8C%D8%A7-%D8%BA%DB%8C%D8%B1-%D8%B1%D9%8F%D9%86%D8%AF-lc88bn6n3qok توی پروسه دیزاین رسیدم به جایی که باید محدوده قیمت رو دیزاین می‌کردم. طی بنچمارک هایی که از قبل داشتیم مشخص شد هر سایت رفتار منحصر به فرد خودش رو داره. اما این بنچمارک تا حد زیادی نیاز ما رو از پرسونا برطرف نمی‌کرد.Price range, trend or non-trend numbersچند نکته رو حین دیزاین محدوده قیمت متوجه شدم : یکی اینکه توی کتگوری ۲، وجود فیلترهای اندازه و قیمت، به جای کمک به کاربر، بیشتر اونو گیج میکنه. با مثال براتون توضیح میدم.فرض کنین کاربر توی یک سایت فروشگاهی از کتگوری ۱ که دسته مردانه باشه، وارد یکی از کتگوری‌های ۲ مثل لباس مردانه میشه. توی این دسته تنوع محصولی مختلفی رو میبینه :دسته‌بندی‌های لباس مردانه در کتگوری ۲اگر بخوایم فیلتر سایز رو در دسته لباس مردانه قرار بدیم، نیاز هست از کمترین سایز تیشرت و پلوشرت تا بیشترین سایز اون، از کمترین سایز شلوار و شلوارک تا کمترین سایز اون و ... توی فیلترها لیست کنیم. هر کدوم از این دسته‌بندی ها مدل نوشتاری سایزشون متفاوته یک دسته بندی حسب نوعش با عدد نشون داده میشه مثل ۴۰،۴۱،۴۲ ... و یک دسته بندی حسب نوعش با حروف انگلیسی نشون داده میشه مثل X،M،L،XL ... .سایزهای متعدد و مبهم در کتگوری ۲ سایت دیجی‌استایلتوی صفحه کتگوری ۲، وقتی کاربر هنوز نمیدونه چه دسته بندی رو نیاز داره عملا اینکه بیاد فیلتر کنه تمام لباس های مردانه شامل پیراهن ست هودی بافت ست دونفره که XL هستند کار منطقی نیست چون کاربر باید ابتدا مشخص کنه که دنبال چی میگرده و بعد بر اساس اون دسته بندی‌شو فیلتر کنه. بنابراین گذاشتن اندازه در کتگوری ۲ جز اینکه نتایج بی حاصل برای کاربر نشون بده، راهکار مفیدی رو ارائه نمیکنه ?‍♂️ .این موضوع در مورد محدوده قیمتی هم به همین شکله و تنوع محصولی بالا در کتگوری ۲ باعث میشه نتیجه درستی از محدوده قیمت به کاربر نشون نده. بنابراین تصمیم بر این شد که تا زمان تست اولیه، اندازه و محدوده قیمت از کتگوری ۲ حذف شه و فقط در کتگوری ۳ نشون داده بشه.اعداد رُند یا غیر رُند در فیلتر محدوده قیمت :حین طراحی این قابلیت در قسمت فیلترها، با علیرضا چند سایت مشابه فروشگاهی مثه دیجی‌ استایل و بانی مد رو بررسی کردیم تا بتونیم دقیق‌تر روی این پروسه تمرکز کنیم ?. اتفاق ناخوشایندی که شاید حداقل از نظرمون غیر منطقی میومد این بود که با کشیدن بازه های قیمتی، ما به همه جور عدد از رند تا غیر رند میرسیدیم.فیلتر محدوده قیمت در سایت دیجی استایلهمونطور که میبینین منطقا هیچ کاربری به دنبال گشتن بین محصولات با بازه‌های قیمتی غیر رند نیست و کاربران ترجیح میدند از یک بازه مشخص رند تا یک بازه مشخص رند دیگه، نتایج رو فیلتر کنند. بالطبع در نتیجه جستجو کاربر اون قیمت های غیر رند هم بین محصولات جستجو شده میبینه و هیچ محصولی رو از دست نمیده.مقاله رو کوتاه کنم، به این نتیجه رسیدیم که در نسخه جدید دایان‌شاپ بیایم و به کاربر قیمت‌های رند رو نشون بدیم و به جای رقمی مثل ۱,۷۴۸,۲۷۹ رقم ۱,۷۵۰,۰۰۰ رو نشون بدیم و به همین شکل ۵تا ۵تا یا ۱۰تا ۱۰تا بازه بعد و قبل رو مشخص کنیم.تغییر قیمت‌های غیر رند به قیمت‌های رند در قسمت فیلترها? مشاهده وب‌سایت دایان‌شاپ⚡️ مشاهده کیس‌استادی دایان‌شاپامیدوارم که براتون مفید باشه و با حمایتتون کمک کنید ?? تا بیشتر بتونم از این مدل‌ پست‌ها منتشر کنم.#producttips| www.afroo.ir | جواد صابری Javad Saberi جواد صابری Javad Saberi Wed, 24 Aug 2022 10:22:40 +0430 https://virgool.io/@javadsaberi/%D8%A8%D8%B1%D8%AF%DA%A9%D8%B1%D8%A7%D9%85%D9%BE-%D8%A8%D9%88%D8%AF%D9%86-%DB%8C%D8%A7-%D9%86%D8%A8%D9%88%D8%AF%D9%86-bd8bnb4b3kle موضوع از این قراره که امروز طی جلسه دمویی که برای صفحه کتگوری نسخه جدید دایان شاپ داشتم توی نسخه موبایل یه چیزی توی رابط کاربری اذیتم میکرد و اون چیزی نبود جز بردکرامب. #Breadcrumb, To be or not to be.وقتی توی نسخه ریسپانسیو موبایل داریم صفحه کتگوری ۲ و۳ رو طراحی می‌کنیم بردکرامب فضای منفی و بدون کاربردی بین سرچ و فیلتر ایجاد میکنه و این فضا عملا برای کاربر فضای مفیدی نیست. از طرفی کم پیش میاد کاربر توی موبایل روی بردکرامپ‌ها کلیک کنه ??. بهتر این بود که اونو برمی‌داشتم تا فیلترها و دسته بندی، بلافاصله بعد فضای سرچ خودشو نشون بده. توی بنچمارک‌هایی هم که کردم دیدم سایت‌هایی مثه دیجی استایل و ترندیول هم همین کار رو کردند و توی این دو کتگوری بردکرامپ رو برداشتند و توی صفحاتی مثه جزییات محصول مجدد نشون دادند.راهکارهای دیگه‌ای هم بود که حذفش نکنیم مثل اینکه بیاریمش زیر نوار فیلتر یا پایین جای فوتر اما زیاد موافقش نبودم و هر کدوم چالش های خودشو داشت.قطعا در آینده، با تست کاربردپذیری میتونیم به نتایج دقیق‌تری برسیم.توی این عکس هم همینطور که میبینین ? داشتم با مدیر سئو و مارکتینگ در مورد بودن یا نبودن بردکرامپ صحبت میکردم تا به یک نتیجه درست برسیم که با جمع‌بندی که با دوستان داشتیم قرار شد بردکرامپ رو استثنائا از صفحات ریسپانسیو موبایل، کتگوری ۲ و۳ برداریم. تا فضای منسجم‌ و بهینه‌تری برای کاربر بوجود بیاریم.در حال دمو کردن صفحه کتگوری‌ها در نسخه جدید دایان‌شاپحذف حالت بریدکرامپ از قسمت بالای فیلترها⚡️ مشاهده کیس‌استادی دایان‌شاپامیدوارم که براتون مفید باشه و با حمایتتون کمک کنید ?? تا بیشتر بتونم از این مدل‌ پست‌ها منتشر کنم.#producttips| www.afroo.ir | جواد صابری Javad Saberi جواد صابری Javad Saberi Tue, 23 Aug 2022 12:10:42 +0430 https://virgool.io/@javadsaberi/%D8%A8%D8%A7-%D8%A8%D8%B1%D8%AA%D8%B1%DB%8C%D9%86-%D8%B4%D8%B1%DA%A9%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%AA%D8%AE%D8%B5%D8%B5%DB%8C-uiux-%D8%A2%D8%B4%D9%86%D8%A7-%D8%B4%D9%88%DB%8C%D8%AF-marzogqvpruu گروه افرو در زمینه خدمات کسب و کارهای آنلاین از قبیل طراحی رابط کاربری و تجربه کاربری (UI/UX)، طراحی لوگو و برندینگ و طراحی گرافیک و هویت بصری فعالیت دارد.گروه افرو | Afroo Groupwww.afroo.irگروه افرو به عنوان یک گروه خلاق، عاشق ساختن محصولاتی است که قابل استفاده، کاربرد پذیر، واکنش گرا، در دسترس و جذاب باشد. گروه افرو برترین شرکت طراحی وب سایت در جشنواره وب و موبایل ایران در سال های متمادی است که از طریق این لینک می‌توانید افتخارات گروه افرو را مشاهده کنید.گروه افرو، برنده تندیس برترین شرکت طراحی وب سایت از جشنواره وب و موبایل ایرانطراحی سایت و UI/UXگروه افرو وب سایت هایی حرفه ای با استفاده از آخرین تکنولوژی های روز طراحی کرده و مشتری های بالقوه شما را به مشتری بالفعل تبدیل می کند.از نمونه کارهای گروه افرو، طراحی وب سایت اقامت ۲۴ است.طراحی اپلیکیشن موبایلگروه افرو با تحلیل تجربه کاربر و با در نظر گرفتن طراحی رابط کاربری، اپلیکیشن های Android و IOS را طوری طراحی می کند که بسیار ساده، کاربر محور و جذاب باشد.مشتریان گروه افروطراحی لوگو و هویت بصریاز شرکت های نوپا گرفته تا شرکت های بزرگ، گروه افرو به شما کمک می کند تا یک برند و هویت بصری منحصربه فرد داشته باشید تا بتوانید براحتی با مخاطبانتان ارتباط برقرار کنید.گروه طراحی سایت افروطراحی بنر و کمپین های تبلیغاتییک تصویر ارزش هزار کلمه را دارد. پیام خود را با بنرهای جذاب و کمپین های تخصصی گروه افرو به گوش مشتریانتان برسانید. نتیجه این همکاری حتما شما را شگفت زده خواهد کرد.شرکت طراحی وب سایت افروhttps://www.afroo.ir/ جواد صابری Javad Saberi جواد صابری Javad Saberi Fri, 13 Nov 2020 15:42:15 +0330