https://virgool.io/feed/@e.shima.sharafinia دایرکتور طراحی تجربه‌ٔ کاربر در دیوار fa 2026-06-07 18:13:14 https://files.virgool.io/upload/users/660593/avatar/tugbcC.jpeg?height=120&width=120 https://virgool.io/@e.shima.sharafinia https://virgool.io/DivarDesign/%D8%A8%D8%A7%D8%B2%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%D8%A7%D9%88%D9%84-%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-%D8%AF%DB%8C%D9%88%D8%A7%D8%B1-jcbqlwwjqhne در این یادداشت دربارهٔ بازطراحی صفحهٔ اول اپلیکیشن دیوار و فرآیندش در تیم املاک توضیح می‌دم. نتیجهٔ این بازطراحی، بهبود دسترسی کاربران به فیلترهای مورد نظر در دسته‌بندی‌های مختلف دیوار بود که منجر به افزایش استفاده از اون‌ها می‌شد.شرح کلی مسئلهرسوندن کاربران به آگهی موردنظرشون همیشه یکی از دغدغه‌های مهم در تیم‌های مختلف دیواره و این مسئله همیشه برای تیم املاک هم پررنگ بوده. ما همواره سعی داریم کمک کنیم کاربران راحت‌تر و سریع‌تر به ملک مورد نظرشون برسن. یکی از راه‌های رسیدن کاربران به آگهی متناسب با نیازشون، استفاده از فیلترهای مناسبه. به طور مثال با تعیین کردن محل، قیمت، متراژ و مواردی از این قبیل کاربران به لیستی از آگهی‌هایی می‌رسن که منطبق با نیازشونه و در نتیجه بین لیست طولانی‌ای از آگهی‌ها گم نمیشن. اضافه کردن فیلترهای کاربردی، طراحی بهینهٔ هر کدوم از فیلترها و بهبود دسترسی به صفحهٔ فیلتر، مواردی بوده که در زمان‌های مختلف در تیم بهش پرداخته شده. مسئله‌ای که من در این نوشته بهش می‌پردازم مربوط به بهبود دسترسی کاربران به صفحهٔ فیلتره. ما در بررسی‌هامون مواردی رو که باید بهبود می‌دادیم شناسایی کردیم که در نهایت منجر به بازطراحی صفحهٔ اول دیوار شد.شرایط مسئله قبل از بازطراحی:قبل از دیدن فیلترهای هر دسته‌بندی، کاربران ابتدا باید دسته‌بندی مورد نظرشون رو انتخاب کنن. در طرح قبلی راه‌های زیادی برای انتخاب دسته‌بندی وجود داشت که به‌طور خلاصه شامل این موارد می‌شد:۱/ چیپ فیلترها۲/ چیپ دسته‌ها۳/ یه تعداد زیردسته‌ٔ هوشمند که البته بعد از تعامل کاربر با اپلیکیشن کم‌کم هوشمند میشن و اول کار ۱۰ زیردستهٔ مشخص و ثابتن.۴/ تب دوم دسته‌ها۵/ استفاده از تاریخچهٔ جستجو۶/ استفاده از جستجوی پیشنهادی، زمانی که کاربر شروع به تایپ عبارتی در فضای جستجو می‌کنه.راه‌های مختلف انتخاب دسته‌بندیدر ادامه با انتخاب دسته‌بندی به هر یک از روش‌های گفته‌شدهٔ بالا، کاربر وارد صفحهٔ لیست آگهی‌های اون دسته میشه و می‌تونه فیلترهای مخصوص به اون دسته رو در بالای صفحه ببینه. نحوهٔ انتخاب فیلترها به این صورته که هم با انتخاب چیپ فیلتر کاربر وارد صفحه‌ای میشه که یکجا تمام فیلترهای مربوط به اون دسته‌بندی رو می‌بینه و هم در ادامهٔ چیپ فیلتر و دسته‌بندی، چیپ‌های تک‌تک فیلترها وجود داره که کاربر میتونه تک‌ به تک اونا رو انتخاب بکنه.فیلترهای نمایش داده شده پس از انتخاب دسته توسط کاربرپژوهش‌های انجام شدهبرای بهبود استفاده از فیلتر، تست‌های کاربردپذیری بر روی فیلترها در تیم املاک و دیگر تیم‌ها انجام شده بود و تست در هر تیم با توجه به اولویت‌ها و نیازهای اون تیم طراحی شده بود.مجموع نتایج تست‌ها رو می‌شد به دو دستهٔ کلی تقسیم کرد؛ یکی مواردی که در صفحات داخلی فیلتر و کاربردپذیری هر کدوم از فیلترها نیاز به بهبود داشت و دیگری مشکلات دسترسی اولیه به فیلترها بود. بخشی که تیم املاک به عهده گرفت، بهبود مشکلات دسترسی اولیه به فیلترها بود. مشکلاتی که شناسایی شد به طور خلاصه شامل موارد زیر بود:با کلیک روی پیشنهادهای جست‌وجو کاربران متوجه انتخاب دسته‌بندی در صفحه‌ٔ اول نمی‌‌شدند.چیپ اصلی فیلترها در صفحهٔ اول دیده نمی‌شد.کاربران متوجه امکان انتخاب دسته‌بندی از طریق چیپ فیلترها یا چیپ‌ دسته‌ها نمی‌شدند.چیپ فیلترها و دسته‌‌ها در صفحهٔ اول برای اکثر کاربران شفاف نبود.مجموع این موارد باعث می‌شد که در ادامه کاربران نتونن عملکرد فیلتر رو شناسایی کنن و به درستی ازش استفاده کنن.داده‌های کمّی بررسی شدهعلاوه بر بررسی خروجی تست‌های کاربردپذیری و پژوهش‌های انجام شده، در ادامه به بررسی داده‌های کمّی مرتبط با انتخاب دسته‌بندی از روش‌های مختلف کردیم. با کمک تحلیل‌گر دادهٔ تیم املاک، سهم انتخاب دسته رو از همهٔ روش‌های موجود (۶ روشی که بالاتر بهش اشاره کردم) حساب کردیم. حالا در ادامه می‌دونستیم که هر تغییری در نوع انتخاب دسته ایجاد کنیم باید چه انتظاری داشته باشیم و مطمئن بشیم که اثر نامطلوبی در جایی از مسیر کاربر نمی‌ذاریم.راه‌حل پیشنهادیدر صفحهٔ اول دیوار عملا در نوار بالای صفحه، ترکیبی از المان‌های مختلف شامل چیپ فیلترها، چیپ دسته‌‌ها، زیردسته‌های پیشنهادی قرار گرفته بود که که عملکردهای مختلف هر کدوم برای کاربران شفاف نبود و نمی‌تونستند به‌درستی کاربران رو هدایت کنن.برای حل مشکل به دو راه‌حل پیشنهادی رسیدم:۱/ نوار بالا رو به فیلتر و چیپ‌های داخلش اختصاص بدم و دسته‌های پیشنهادی هوشمند رو حذف کنم. کلا نوار بالا رو به مفهوم فیلتر اختصاص بدم.۲/ فیلتر رو زمانی که کاربر هنوز دسته‌ای انتخاب نکرده نمایش ندم و کلا نوار بالا رو به مفهوم انتخاب دسته اختصاص بدم.راه‌حل‌های پیشنهادیبا توجه به صحبت‌هایی که در تیم داشتم راه‌حل دوم رو به دلایل زیر انتخاب کردم:برای استفاده از فیلتر و افزایش انتخاب فیلترها ابتدا کاربر باید دسته‌بندی مورد نظرش رو انتخاب کنه تا در نتیجه بتونه به فیلتر مورد نظرش برسه. بنابراین برجسته کردن انتخاب دسته برای کاربر در اولویت قرار گرفت.زمانی که کاربر هنوز چیزی جستجو نکرده و یا دسته‌ای انتخاب نکرده نیاز نداره فیلتری مشخص بکنه و در واقع باید فیلتر در مرحلهٔ بعد بهش نمایش داده بشه.با توجه به این‌ که انتخاب شدن دسته‌بندی در زمان جستجو و زمانی که کاربر روی جستجوهای پیشنهادی کلیک می‌کنه برای کاربر شفاف نبود، من به این مسئله فکر کردم که صفحهٔ اول باید طرح متفاوتی از صفحه‌ای که در اون فیلتری انتخاب شده، داشته باشه تا کاربر این تغییر فضا رو متوجه بشه و در مرحلهٔ بعد‌ توجهش به نوار بالا بیشتر جلب بشه. اینجوری تصور نمی‌کنه که نوار بالا همون دسته‌های انتخابیه که در صفحهٔ اول وجود داشته.چالشی که وجود داشت و منجر به طرح بعدی شدبا توجه به این‌که داشتیم صفحهٔ اول رو تغییر می‌دادیم این دغدغه وجود داشت که دسته‌های پیشنهادی هوشمند که کار کاربر رو بسیار ساده می‌کنند حذف میشه و در واقع داریم یه سری از کاربرها رو از انتخاب سریع دسته‌بندی محروم می‌کنیم. باید سعی می‌کردم طرح پیشنهادی المان‌های مفید از طرح فعلی دیوار را در خودش داشته باشه، مثل دسترسی سریع به یک سری زیردستهٔ پیشنهادی. در طرح جدیدی که بهش رسیدم، بخشی به نام بازدید‌های اخیر وجود داشت که در ابتدا نمایش داده نمی‌شد. بعد از تعامل کاربر با آگهی‌های مورد نظرش و یا انتخاب دسته‌بندی در ادامه با منطق خاصی سه‌دسته‌ای که آخرین انتخاب‌های کاربر بودن به نمایش گذاشته می‌شد.صفحهٔ اول در طرح نهایی قبل و بعد از تعامل کاربر با اپلیکیشن دیوارنتیجه و اثرگذاریانتظار داشتیم بعد از این طراحی:۱/ نحوهٔ انتخاب دسته‌بندی طوری تغییر کنه که تاثیر منفی‌ای روی جستجوی کاربران و انتخاب دسته از اون روش نذاریم. (روش‌های ۵ و ۶)۲/ انتخاب دسته‌بندی از نوار بالایی و بازدیدهای اخیر در طرح جدید، بیشتر از مجموع انتخاب دسته از سه روش قبلی (چیپ فیلتر (روش ۱)، چیپ دسته‌بندی (روش ۲) و چیپ‌های هوشمند انتخاب دسته (روش ۳)) بشه.۳/ با توجه به شفاف‌تر شدن انتخاب دسته‌بندی در صفحهٔ اول، میزان انتخاب دسته از تب دسته‌ها (روش ۴) کاهش پیدا بکنه.۴/ در ادامه با توجه به شفاف‌تر انتخاب شدن دسته‌بندی، کاربرها بیشتر از فیلتر در لیست آگهی‌ها استفاده کنند.این طراحی جدید رو ابتدا برای درصدی از کاربران نمایش دادیم و بعد از بررسی‌های تحلیل‌گر داده در تیم املاک، متوجه شدیم انتخاب دسته‌بندی ۶ درصد و انتخاب فیلترها ۵ درصد نسبت به طرح قبلی بیشتر شده. در نتیجه صفحهٔ اول دیوار به طراحی جدید تغییر پیدا کرد و در حال حاضر برای تمام کاربران در دسترسه. شیما شرفی‌نیا شیما شرفی‌نیا Mon, 14 Jun 2021 16:34:59 +0430 https://virgool.io/DivarDesign/%D8%AF%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D9%90-%D8%B4%D8%B1%D9%88%D8%B9%D9%90-%D9%85%D8%B3%D8%AA%D9%86%D8%AF%D8%B3%D8%A7%D8%B2%DB%8C-%D8%B3%D9%86%D9%91%D8%AA-%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%AF%DB%8C%D9%88%D8%A7%D8%B1-ob0edz6dk7ur اواسط آبان ۹۹ بود که نسخهٔ اول سنّت دیوار لانچ شد. پروژه‌ای که پیشبردش برای خود من تجربهٔ جذابی بود و البته هنوز هم ادامه داره :) در این مطلب می‌خوام در مورد روندی که در دیوار طی کردیم تا بتونیم دیزاین سیستمِ طراحی‌شده رو مستند کنیم بنویسم. فرآیندی که حاصل همکاری سه چپتر مختلف دیوار، یعنی مهندس ، طراح و نویسندهٔ تجربه بود.آشنایی با سنّتدر محصولی مثل «دیوار» که از چندین تیم محصولی با نقش‌های متفاوت تشکیل شده، ریسک عدم هماهنگی زیاده و ممکنه فرآیند طراحی محصول، بهینه پیش نره. برای تعامل بین نقش‌های مختلف در تیم، یه زبان مشترک نیازه که قواعد مشترک دیزاین در اون تعریف و مستند شده باشه.سنّت، دیزاین سیستمِ دیواره که مجموعه‌ای از کامپوننت‌هاییه که دیوار رو می‌سازن به همراه توضیح کامپوننت‌ها و راهنمای استفاده ازشون.با داشتن این مرجعِ متشکل از تصمیمات و قواعدِ مستند‌شده، محصول یکپارچه‌ای با حفظ استانداردهای طراحی داریم که به افراد وابسته نیست و باعث می‌شه طراحان زمان زیادی برای طراحی جزئیات رابط کاربر صرف نکنن. در عوض، زمان خودشون رو به نوآوری در محصول، حل مسائل واقعی کاربر و رشد شخصی اختصاص بدن. در نتیجه کاربران هم محصول کاربردپذیرتری رو تجربه‌ خواهند کرد.چی شد که سنّت رو مستند و منتشر کردیم؟در واقع ما این دیزاین سیستم رو داشتیم و در حال کاملتر کردنش هم بودیم. در ادامه به فکر افتادیم که مستندش کنیم و در این مسیر:۱- در مورد طراحی اینترکشن اجزای دیزاین‌سیستم‌ها بیشتر مطالعه کنیم.۲- همگی، دید بهتری از طراحی سیستمی اینترفیس یک محصول به‌دست بیاریم.۳- نوشتن رو طبق چارچوب و اصول مشخص تمرین کنیم.۴- طی این فرآیند فیدبک بگیریم.۵- و در نهایت پیشبرد و مدیریت یک پروژه‌ٔ مشترک رو با هم تجربه کنیم که علاوه بر یادگیری و رشد برای ما، محصولی داشته باشیم که سبب اشتراک دانش ما با جامعه‌ٔ بیرون از دیوار بشه.چه فرآیندی انجام شد و نقش من چی بود؟من به عنوان یکی از طراحان تجربهٔ دیوار مسئولیت پیشبرد این پروژه رو به عهده داشتم و برای انجامش باید بین سه چپتر مهندسی تجربه، طراحی تجربه و نویسندهٔ تجربه هماهنگی ایجاد می‌کردم.تو شروع کار، تعداد زیادی کامپوننت داشتیم که باید با برنامه‌ریزی به سمت مستند کردنشون پیش می‌رفتیم. در اولین قدم به کمک مهندسان تجربه، کامپوننت‌ها رو بر اساس نوع کامپوننت و پیچیدگی‌ ویژگی‌های تعاملی اون‌ها دسته‌بندی کردیم. کامپوننت‌ها رو از نظر نوع به سه دستهٔ ساده، پیچیده و اختصاصیِ دیوار و از نظر پیچیدگی، به سه دستهٔ ساده، متوسط و سخت تقسیم کردیم.در قدم بعد، تصمیم گرفتیم که برای شروع و فاز اول پروژه، سراغ مستند کردن تمام کامپوننت‌های ساده‌ بریم. توی این مرحله باید برای نوشتن مطالب، ساختار در می‌آوردیم. ساختاری رو که به کمک مهندس تجربه و نویسندهٔ تجربه برای متون کامپوننت‌ها مشخص کردیم، به این صورت بود:۱- تعریف مختصر و موثری از کامپوننتی که می‌خوایم دربارهٔ اون بنویسیم.۲- دموی تعاملی که شامل پیش‌نمایش، انواع و تفاوت‌های نمایشی اون کامپوننت می‌شد.۳- کاربرد، که در اون باید تعاریف یا مواردی که در کامپوننت وجود داشت رو می‌نوشتیم و می‌گفتیم هر کدوم چه استفاده‌ای دارن.۴- در ادامه در مورد انواع یک کامپوننت باید توضیح می‌دادیم و هر نکته‌ای که باید دربارهٔ اون‌ها گفته بشه.۵- آناتومی، شامل ابعاد، حاشیه‌ها، فاصله‌های کامپوننت و کمیت‌ها می‌شد.۶- رفتار، شامل قوانین و دستورالعمل‌هایی که باید در استفاده از کامپوننت، اون‌ها رو رعایت کنیم.۷- و در نهایت نگارش، که نکات مربوط به نوشتن در کامپوننت‌ها، محدودیت‌های کاراکتری و قواعد نشانه‌گذاری رو شامل می‌شد.البته یه بخش‌هایی به اسم بنیان سنّت (آیکون، تایپوگرافی، چیدمان و ... ) علاوه بر کامپوننت‌ها داشتیم که برای نوشتن بنیان‌ها، ساختار مشخصی وجود نداشت. چون هر کدوم بسته به ویژگی‌هایی که داشت ساختار متفاوتی رو می‌طلبید که برای این بخش‌ها هم، قبل از نوشتن هر کدوم، جلسه‌ای بین مهندس، نویسنده و طراح تجربه برگزار می‌کردیم. با صحبت به یک ساختار می‌رسیدیم که برای نوشتن محتوای اون بخش استفاده کنیم‌.من با همکاری طراحان تجربه، کامپوننت‌ها رو تقسیم کردیم. هر طراح تجربه، مسئول نوشتن محتوای یک یا چند کامپوننت بسته به میزان سختی و پیچیدگی اون ‌شد. زمان شروع نوشتن محتوا، طراح سوالات لازم رو از مهندس تجربه می‌پرسید و محتوا رو بر اساس کاربردهای اون کامپوننت در دیوار و با مطالعهٔ دیزاین سیستم‌های مختلف و مطرح دنیا مثل متریال، اطلسین، اسپکتروم و ... تهیه می‌کرد.در ادامه، طراح این محتوا رو از همه لحاظ با مهندس تجربه بررسی می‌کرد و بعد از تایید اون، محتوا از نظر نگارشی با نویسندهٔ تجربه طی چند مرحله نهایی می‌شد. در واقع برای نسخهٔ نهایی هر کامپوننت، یک فرآیند رفت و برگشتی بین سه چپتر دیوار (طراحی، مهندسی، نویسندگی) انجام می‌شد.ادامهٔ سنّتمی‌تونم بگم تمام اهالی محصول دیوار به نوعی در رشد محصولی که پیش روی شماست نقش داشتن. در ادامه نیز همین مسیر رو پی می‌گیرن و سنّت رو کامل‌تر می‌کنن. شما هم در جایگاه مخاطب این محصول، می‌تونید با بازخورد دادن به ما در رشد و بهبود سنّت نقش کلیدی داشته باشین. شیما شرفی‌نیا شیما شرفی‌نیا Sun, 28 Feb 2021 17:58:30 +0330