یکی از کارهایی که بهعنوان طراح تجربه کاربری انجام میدهم، بررسی کامل محصول شماست تا مشکلاتی که کاربران در مسیر استفاده دارند شناسایی و برطرف شود. هدف این کار، بهبود عملکرد محصول و افزایش تبدیل کاربر به مشتری است.
در اینجا سعی کردهام مسیر پیدا کردن این مشکلات و یک چکلیست کاربردی را با مثال و به زبان ساده توضیح بدهم.
این چکلیست بر اساس ترکیبی از روشهای استاندارد مثل Heuristic Evaluation و UX Audit و همینطور خطاها و الگوهای پرتکراری که در بسیاری از محصولات دیده میشود، تهیه شده است.
آیا هدف هر صفحه مشخص است؟ آیا کاربر بدون فکر کردن زیاد، میفهمد چه کاری باید انجام دهد؟ آیا متنها (labels, CTAها) شفاف هستند؟
گاهی هدف اصلی یک صفحه مشخص نیست. وجود چند دکمه با درجه اهمیت یکسان کاربر رو گیج میکنه و یا حتی CTAهای مبهمی مثل«ادامه» و «ثبت» که مرحله بعدی رو برای کاربر روشن نمیکنه. حتی گاهی استفاده از اسمگذاریهای پیچیده، خلاصه شده و اصطلاحات تخصصی داخل تیمی باعث سردرگمی کاربر میشود.
در پروسه پرداخت، کاربر در چند مرحله دکمه «ادامه» را کلیک میکند و نمیداند چند مرحله دیگر وجود دارد و صفحه بعدی چه اطلاعاتی از او میخواهد. همین میتواند باعث ریزش در انجام عملیات شود.
بهتر است در ابتدا نمایش دهید چند مرحله در پیش رو دارد و اکنون در کدام مرحله است و حتی چه ملزوماتی را باید از پیش آماده کند. یک کپی درست روی CTA هم کمک میکند مثلا بجای ادامه بنویسید: «پرداخت و تکمیل خرید»
آیا مسیر رسیدن به هدف کوتاه و واضح است؟
آیا کاربر همیشه میداند کجاست؟ (breadcrumbs / active states)
آیا ساختار دستهبندی منطقی است؟
منوهای پیچیده یا چندسطحی بدون اولویتبندی واضح (hierarchy)
گم شدن کاربر در جریان انجام عملیات flow
در یک فروشگاه (ecommerce) در دستهبندی «دیجیتال» موبایل، لپتاپ و لوازم جانبی دیده میشود اما «هدفون» در جای دیگری قرار گرفته. این یعنی عدم هماهنگی (inconsistency) و مشکل در معماری اطلاعات.
بهتر است با روشهای موجود (مثل کارت سورتینگ) دستهبندیها و حتی ساختار کلی محصول را در مسیر مورد انتظار کاربر بچینید.
آیا UI patterns در کل محصول یکساناند؟
آیا رفتارها قابل پیشبینیاند؟
دکمه Primary در یک صفحه آبی، در صفحه دیگر سبز است؟
رفتار متفاوت یک action مشابه
در یک فرم یک جا error زیر input است و جای دیگر بالای صفحه. این باعث میشود کاربر گیج شود. بهتر است از یک دیزاین سیستم واحد تبعیت کنید و هر آیتم در جای صحیح نمایش داده شود.
آیا بعد از هر action، feedback واضح وجود دارد؟
آیا loading، success، error states طراحی شدهاند؟
کلیک میکنی اما هیچ اتفاقی نمیافتد
لودینگ طولانی بدون شمارنده (indicator)
کاربر بعد از کلیک دکمه «ارسال» روی یک فرم با هیچ واکنشی رابرو نمیشود و چندبار روی آن کلیک میکند؟
این یعنی بعد از کلیک منتظر واکنشی از سیستم است و میتوان با یک لودینگ روی دکمه (Spinner) و نمایش متن شما در حال ارسال است و سپس تایید ارسال او را از تکمیل فرایند آگاه کنید.
آیا قبل از وقوع خطا از آن پیشگیری میشود؟
آیا پیام خطا واضح و actionable است؟
خطاهای مبهمی مانند «مشکلی رخ داد» یا «خطای ناشناخته»
از دست رفتن داده بعد از خطا
در فرم ثبتنام در صورت خطا در یکی از آیتمها کل فرم ریست میشود؟
بهتر است خطا زیر همان فیلد بصورت مشخص نمایش داده شود و اطلاعات قبلی پاک نشوند.
آیا کاربر سریع به هدف میرسد؟
آیا مراحل غیرضروری حذف شدهاند؟
فرمهای طولانی
نیاز به ورود اطلاعات تکراری
بجای چندبار پرسیدن اطلاعات تکراری در صفحات ثبتنام یا (checkout) یکبار آدرس و شماره تلفن را دریافت و امکان انتخاب یا بازنشانی آنها را فراهم کنید.
آیا مهمترین عناصر دیده میشوند؟
آیا صفحه قابل اسکن سریع است؟
CTA در میان عناصر گم شده
استفاده بیش از حد از وزن و رنگ یکسان
معمولا در لندینگپیجها به دلیل تعدد آیتمها و توضیحات و تصاویر رنگی اغراق شده، دکمه اصلی ثبتنام یا خرید قابل یافتن نیستند. بهتر است با یک رنگ متمایز در ابتدا و انتهای صفحه آن را نمایش دهید و مطمئن شوید کاربر در اولین نگاه آن را مییابد.
contrast رنگها مناسب است؟
آیا گردش در سایت، تنها با کیبورد امکانپذیر است؟
آیا alt text (متن توضیح دهنده تصاویر) برای تصاویر وجود دارد؟
متن خاکستری روی سفید (low contrast)
reliance فقط روی رنگ
در صفحه فرم، ارور را فقط با رنگ قرمز مشخص کردهاید؟ مطمئنا کاربر کمبینا و کور رنگ یا حتی کاربر نابینایی که از دستیار صوتی گوشی استفاده میکند هم نمیتواند ارور را تشخیص دهد.
بهتر است با یک آیکون و متن هشدار مشخص خطا را مشخص کنید.
آیا UI در موبایل usable است؟
آیا touch targets استانداردند؟
دکمههای کوچک
overflow شدن محتوا
مثلا در فیلترهای بلند در صفحه نمایش موبایل، یا مودالهای دکمه اصلی (CTA) خارج از مرکز نگاه کاربر(viewport) است؟
بهتر است در جای مشخص و در معرض دید مثلا بالای صفحه یا بصورت شناور آن را نمایش دهید.
آیا متنها راهنمای کاربر هستند؟
آیا tone برند رعایت شده؟
متنهای بیروح یا بیش از حد رسمی
نبود guidance در نقاط حساس
در صفحه خالی (empty state) تنها مینویسید «چیزی یافت نشد»؟
بهتر است از فرصت استفاده کنید و بنویسید «هنوز آیتمی اضافه نکردی» و با یک دکمه مشخص «شروع کن» او را برای استفاده از صفحه تشویق و ترغیب کنید.
آیا محصول حس اعتماد ایجاد میکند؟
آیا اطلاعات حساس شفاف مدیریت شدهاند؟
نبود نشانههای اعتماد (review، ssl، ...)
طراحی ضعیف در صفحات مالی
صفحه پرداخت بدون هیچ لوگو و نشان امنیتی نمایش داده میشود؟ حتما کاربرها در استفاده شک میکنند.
باید نشان دهید که معتبر هستید و اگر در این پروسه به مشکل خوردند پشتیبانی همراه آنهاست.
empty، loading، error، success طراحی شدهاند؟
رفتار سیستم در حالتهای خاص مشخص است؟
فقط happy path طراحی شده
edge caseها رها شدهاند
در صفحه لیست سفارشات زمانی که هیچ سفارشی نیست پیشبینی نشده و صفحه خالی نمایش میدهید؟
بهتر است پیشنهاداتی بر اساس ذائقه کاربر را در این صفحه نمایش دهید یا به یکی از دستهبندیها برای خرید هدایتش کنید.
آیا محصول سریع به نظر میرسد؟
آیا skeleton یا progressive loading دارد؟
delay بدون feedback
lag در interaction
صفحه داشبورد بعد از چند ثانیه وقفه و نمایش صفحه سفید بارگزاری میشود؟
بهتر است صفحه با یک لودینگ از جنس skeleton یا progressive loading بارگزاری شود.
آیا از الگوهای رفتاری درست استفاده شده؟
آیا cognitive load پایین است؟
تصمیمگیری سخت (too many options)
choice overload
صفحه قیمتگذاری و اشتراک (pricing) با ۷ پلن مختلف کاربر را مواجه میکنید؟ حتما در انتخاب تردید میکند. بهتر است با ۳ پلن که یکی از آنها پیشنهاد شماست روبرو شود.
آیا مسیر conversion واضح است؟
آیا frictionهای غیرضروری حذف شدهاند؟
CTAهای ضعیف
mismatch بین intent کاربر و flow
کاربر از مسیر تبلیغات برای خرید محصول وارد شده اما او را مجبور به ثبتنام میکنید؟ حتما ادامه نمیدهد! بهتر است در پروسه خرید با کمترین اطلاعات ثبتنامش کنید.
برای مشاوره و طراحی محصول میتوانید با من، آرین مقبلی از طریق ردلینک در تماس باشید: redl.ink/arian
