امیرحسین کریمی
امیرحسین کریمی
خواندن ۸ دقیقه·۴ سال پیش

ری‎‎‎‎‎دیزاین سامانه دان

کیس اِستادی ری‎‎‎‎‎دیزاین سامانه دان
کیس اِستادی ری‎‎‎‎‎دیزاین سامانه دان


مقدمه

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

( آپدیت: کیس استادی سایر پروژه هارو از مدیوم بخونید )


اهداف من

هدف اولیه من فقط نوشتن یک کیس‎‎‎‎‎استادی فارسی و یادگرفتن بود؛ و بعد هم بهبود تجربه‎‎‎‎‎کاربری سایت در موبایل، حل مشکلات کاربردپذیری و دسترسی‎‎‎‎‎پذیری، و در آخر تست درست بودن فرضیه هام


فرضیه‎‎‎‎‎های من

قصه نوشتن این کیس استادی دقیقا از اتفاقی که برای خودم و مشاهداتی که داشتم اتفاق افتاد و کشیدن نقشه همدلی؛ و فرضیه‎‎‎‎‎هایی که من بعد از مشاهداتم ایجاد کردم این موارد هست:

  • ندادن اطمینان کافی ارسال موفق پاسخنامه ( پیامی مبنی بر ارسال موفق بعد از ثبت پاسخنامه نمایش داده می‎‎‎‎‎شود اما کافی نیست در وضعیتی که دانشجو در حال آزمون در شرایط استرس،احساسات متفاوتی هست که بهش می‎‎‎‎‎پردازیم تو نقشه همدلی )
  • پیمایش ضعیف ( مشکل پیمایش ضعیف، به واسطه فضایی که درست استفاده نشده در قسمت Header سایت ایجاد شده، و نبود وضعیتی برای تب فعال و غیرفعال هم یکی از گزینه هاست و این مشکل در حالت موبایل خیلی ملموس‎‎‎‎‎تره؛ و مشکل بعدی داشتن کلیک‎‎‎‎‎های اضافی برای رسیدن به یک کار همیشگی که هر دانشجو انجام میده هست، یعنی بعد از لاگین کردن و رفتن به بخش جلسات یک صفحه خالی ما بین این دو وجود داره که بهتره پیش‎‎‎‎‎فرض بعد از لاگین وارد صفحه کلاس‎‎‎‎‎های من بشه
  • مشکلات بصری ( عدم استفاده رنگ مناسب، نبود یکپارچگی مقیاس‎‎‎‎‎ها در اِلمان‎‎‎‎‎‎های بصری، مشکلات خوانایی و نداشتن سلسله مراتب و اولویت بصری و معماری اطلاعات مناسب )


مصاحبه با کاربران

من با 5 نفر صحبت کردم و هدفی که داشتم و چیزی که می‎‎‎‎‎خواستم بدونم، این بود که با چه مشکلاتی روبرو می‎‎‎‎‎شدن و چه اقدامی انجام دادن بعدش، و در این حین هم بزارم صحبت کنن و فلوی خاصی رو در پیش نگیرم تا نیازهای کاربر رو شناسایی کنم


تعریف و کشفیات من

احساس می‎‎‎‎‎کردم که وقتی مصاحبه می‎‎‎‎‎کنم همه فرضیه‎‎‎‎‎هایی که شناسایی کردم تایید میشه اما این اتفاق نیوفتاد و بعضی از دغدغه‎‎‎‎‎‎هایی که باهاش شروع کردم فقط درصد کمی بهش اشاره کردن.

اما با مصاحبه دید خوبی هم نسبت به نیازهای کاربران پیدا کردم مثل: نیاز به ضبط و دسترسی به جلسات بعد از کلاس، بحث کلاس‎‎‎‎‎هایی که به عنوان مثال شناسه‎‎‎‎‎های ورود به کلاس برای یک کلاس ایجاد شده مثل کلاس های عملی و فقط افرادی که کلاس تئوری و عملی اونها یک کلاس هست دسترسی دارن و بقیه برای ورود باید شناسه و رمز عبور بگیرند


نقشه همدلی

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

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

نقشه همدلی - Empathy mapping - یکی از نقشه های همدلی برای بخش آزمون های من
نقشه همدلی - Empathy mapping - یکی از نقشه های همدلی برای بخش آزمون های من


داستان های کاری - Jobs Stories

این اصل Jobs Stories رو خیلی دوست دارم مخصوصا برای وقتی که می‎‎‎‎‎خوای متوجه بشی که چه کاری در چه وضعیتی انجام میدن کاربرها و انگیزه هاشون چیه، پس من خودم به عنوان کسی که از این سامانه استفاده می‎‎‎‎‎کنم شروع کردم به نوشتن چند مورد (و با توجه به مصاحبه ها) برای بخش آزمون‎‎‎‎‎ها و بعد هم اولویت بندی:

وقتی که امتحان باید بدم، می‎‎‎‎‎خوام که بتونم موقع آپلود فایل متوجه روند آپلود بشم، بنابراین می‎‎‎‎‎تونم از آپلود شدن صحیح و روند مطمئن بشم
وقتی که بعد از ثبت شدن موفق به صفحه آزمون رفتم، می‎‎‎‎‎خوام که مطمئن شم که پاسخنامه ثبت شده، بنابراین می‎‎‎‎‎تونم از صحت ثبت مطمئن بشم
وقتی که امتحان باید بدم، می‎‎‎‎‎خوام که بتونم امتحانات رو بر اساس تاریخ مرتب ببینم (یا فیلتر کنم)، بنابراین می‎‎‎‎‎تونم آزمون‎‎‎‎‎های آینده رو راحت ببینم


ایده های من
ایده های من


ایده‎‎‎‎‎های من

سامانه مشکلات بصری از رنگ تا عدم یکپارچگی دیزاین داره، اما تو این بخش مواردی برای بهبود با حداقل تغییرات ( هرچند تغییر کوچیک در دنیای محصول و کار تیمی نداریم ) رو لیست می‎‎‎‎‎کنم:

  • ایجاد تمایز بصری وقتی کاربر مجددا بعد از ثبت موفق پاسخنامه به صفحه آزمون که هنوز باز هست مراجعه میکنه، و دادن این اطمینان که پاسخ ثبت شده و جلوگیری از اینکه دچار تردید و ارسال مجدد به استاد شه
  • نمایش وضعیت سیستم در زمان آپلود پاسخنامه ( البته روند آپلود در سامانه خوب هست اما نیازه بر اساس اصول ارزیابی اکتشافی، ویرگول جان وقتی بولت وار مینویسیم لینک آبی نمیشه چرا؟ )
  • کاهش فضای زائد قسمت Header سامانه مخصوصا در موبایل که پیمایش رو مشکل میکنه
  • حذف مراحل الکی برای رسیدن به یک صفحه که اکثر دانشجویان روزمره انجام میدن برای ورود به کلاس ( بعد از لاگین و برای ورود به کلاس مجددا باید به صفحه جلسات برید؛ خب یک دانشجو اصلی‎‎‎‎‎ترین کاری می‎‎‎‎‎تونه کنه و بخاطرش میاد همین رفتن به کلاس هست )
  • ایجاد پیمایش بهتر و ایجاد تمایز بین تب‎‎‎‎‎های فعال و غیرفعال
  • مرا بخاطر بسپار برای ورود، تغییر ندادن نام فایل موقع آپلود شدن در فیلد پاسخنامه، ایجاد سلسله مراتب بصری بهتر و مخصوصا معماری اطلاعات بهتر


رویکرد من در دیزاین

من سعی کردم بفهمم کاربرها بیشتر از چه دستگاهی استفاده میکنن موقع کلاس‎‎‎‎‎های مجازی که نسبتا متغیر بود در کلاس‎‎‎‎‎های روزمره بیشتر موبایل اما کلاس‎‎‎‎‎هایی که نیاز به اشتراک‎‎‎‎‎گذاری یا همراهی با استاد بود سیستم شخصی؛ و حالتی هم بود که گاها هم موبایل هم سیستم شخصی بود که من هم از اون دسته بودم که اون حالت، زمان امتحانات بود برای راحتی (سوالات رو دانلود می‎‎‎‎‎کردیم با سیستم و بعد از پاسخ و اسکن و تبدیل به pdf با موبایل آپلود می‎‎‎‎‎کردیم) و در نهایت تصمیم گرفتم با رویکرد Mobile First Design کار رو جلو ببرم؛ من به اهداف، فرضیه هام و بعضی چیزهایی که علنن نیازی به تستش نبود فکر می‎‎‎‎‎کردم مثل نداشتن اندازه و مقیاس درست، نبود سلسله مراتب بصری خوب، فضای هرز و کاهش سرعت حرکت و ... در سامانه فعلی

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

دیزاین و مقایسه

همونطور که گفته بودم این سامانه به قدری دیزاین و پیاده سازی ضعیفی داره که اصلاح موارد ابتدایی خودش میتونست فضای بهتری رو ایجاد کنه بدون هیچ تغییرات کلی؛ و من سه صفحه اصلی رو در کنار هم قرار دادم تا دوستانی که با این سامانه کار نکردن و امکان دسترسی هم ندارن صفحات سامانه فعلی رو هم مشاهده کنند

از بین بردن فضای زائد + CTA بهتر + مرا بخاطر بسپار
از بین بردن فضای زائد + CTA بهتر + مرا بخاطر بسپار


پایین اومدن میانگین زمان حرکت بین تب‎‎‎‎‎ها + کاهش فضای زائد با بردن دسترسی سریع به مُدال
پایین اومدن میانگین زمان حرکت بین تب‎‎‎‎‎ها + کاهش فضای زائد با بردن دسترسی سریع به مُدال


حالت غیرفعال برای فیلدهای غیرقابل تغییر + نمایش بهتر در موبایل
حالت غیرفعال برای فیلدهای غیرقابل تغییر + نمایش بهتر در موبایل


نتیجه گیری و دستاوردهای شخصی

دستاوردهایی که بدست میارم از پروژه، از ابتدا و در حین کار رو پروژه برام مشخص بودن و همین بود که منو تشویقم می‎‎‎‎‎کرد که این کارو انجام بدم و با شما به اشتراک بزارم، از دیزاین با حساب کتاب تا کوچیک‎‎‎‎‎ترین جزئیات و تاثیرش، همش اینو میگفت که حالا حالا تجربه های زیادی مونده که منتظرت هستن (:
و قصد من، هرچند نه پرفکت اما برای خودم انجام پروژه براساس تفکرطراحی به معنای واقعی بود و تلاش برای رسیدن به قالب کردن این تفکر در فرآیند کار بود، نه صرفا Done کردن چند مِتد بدون درک از چرایی استفاده و بدون هیچ استراتژی برای استفاده از اون؛ و در آخر متشکرم از وقتی که گذاشتین. مشاهده همه صفحات در Behance

منو دنبال کنید

اگر دوست داشتین داخل کانال شخصی تلگرام من جوین شید، گاهی موضوعات جالبی رو بدون وسواس به اشتراک میزارم تا هم دلیلی باشه برای فعالیت خارج از حوزه دیزاین و محصول، و هم پیدا کردن دوستانی که شاید باهم باورهای مشترک داشته باشیم. صفحه Behance من و مشاهده سایر صفحات این پروژه


https://vrgl.ir/pCUPM
https://vrgl.ir/dXlWM
https://vrgl.ir/isc47
https://vrgl.ir/5C2Rk
https://vrgl.ir/m8X83



طراحی محصولکیس استادی uxفرآیند طراحی uxفرآیند طراحی ui uxتجربه کاربری
t.me/bioamirkarimi ?? اینجا قراره موضوعات جالبی رو بدون وسواس به اشتراک بزارم تا هم دلیلی باشه برای فعالیت خارج از حوزه دیزاین و محصول، و هم پیدا کردن دوستانی که شاید باهم باورهای مشترک داشته باشیم
شاید از این پست‌ها خوشتان بیاید