اپلیکیشن فروشگاهی Lawazm: طراحی UX صفحه اصلی
سعید کشاورز کرمانی (سردبیر)
لوازم یک فروشگاه کویتی است که در حوزه محصولات مربوط به نوزادان و کودکان و همچنین کالاهای خانگی فعالیت دارد. همکاری شرکت کنترل اعداد و لوازم از آنجایی شروع شد که آنها یک پلتفرم الکترونیکی قابل اعتماد برای عرضه محصولات خود در سطح کویت و خاورمیانه نیاز داشتند.
مرحله طراحی همیشه اولین چالش برای توسعه دهندگان نرم افزار است. آنچه مشتری در مورد کسب و کار به ما گفته است باید به بهترین شکل ممکن در یک قاب موبایل به تصویر کشیده شود. با این حال، این تنها چیزی نیست که مشتری از ما توقع دارد. ترکیب کردن درخواست‌های مشتری و استاندارد طراحی UI/UX کار را دشوارتر می کند.
در این مقاله، بخشی از تجربه طراحی خود را با پروژه لوازم به تصویر خواهیم کشید.
تِم و سبک طراحی
اول از همه، سبک طراحی و تم آن باید نشان‌دهنده صنعتی باشد که مشتری در آن زمینه فعالیت می کند.
برای رسیدن به این هدف، خود را به جای کاربر برنامه بگذارید، به عنوان مثال آیا صفحه معرفی برنامه (splash screen) فضای کسب و کار مورد نظر را منتقل میکند و ذهن شما را به سمت آن کسب و کار سوق میدهد؟
به عبارت دیگر، سبک طراحی کلی برنامه باید ماهیت کسب و کار را نشان دهد.
اگر نرم افزار شما از حساب‌های کاربری مهمان پشتیبانی نمی کند، کاربر در هنگام باز کردن اپلیکیشن به صفحه ثبت نام/ورود به سیستم هدایت می شود.
در غیر این صورت کاربر مستقیما به صفحه اصلی منتقل می شوند.
لَندینگ پیج (صفحه فرود)
از بالا شروع میکنیم، نوار بالایی صفحه اصلی موقعیت فعلی کاربر در اپلیکیشن را نشان می دهد. همچنین ممکن است شامل امکاناتی مانند دکمه جستجو، دکمه پروفایل یا نوار کناری باشد.
آنچه که کاربر پس از ورود به برنامه با آن روبرو میشود قسمت بالای صفحه اصلی است. موردی که بیشترین جلب توجه را برای کاربران دارد، بنر است که می تواند جدیدترین اخبار آن کسب و کار، محصولات جدید، تبلیغات یا حتی کمپین‌های تجاری را به نمایش بگذارد.
هنگامی که یک شرکت در زمینه لوازم خانگی فعالیت می کند که شامل طیف وسیعی از محصولات است و قصد دارد هرچه بیشتر محصولاتش را به جامعه هدف گسترده‌ای از مشتریان بفروشد، توصیه می شود دسته بندی های محصولات و خدمات خود را در صفحه اصلی قرار دهد تا کاربر را هر چه سریعتر (تا قبل از اینکه گیج شود) به دسته مورد نظر هدایت کند.
لیست کاروسلی
کاربر می تواند تنها با کمی جابه جا کردن لیست کاروسلی، محصولات ویژه و بعد از آن پرفروش‌ترین محصولات را ببیند. ما لیست محصولات ویژه را اول آوردیم چراکه، محصولات خاص و ویژه این شرکت باید ابتدا نمایش داده شوند، تا کاربر مجذوب کسب و کار شود. سپس می توانیم جدیدترین یا پرفروش‌ترین محصولات را در ادامه بیاوریم.
محصولات تخفیف خورده باید در لیستی از صفحه اصلی تحت عنوان فروش روزانه نمایش داده شوند.
عنوان "فروش روزانه" حس فوریت را القا میکند. این کار معمولاً روند خرید را سرعت می بخشد. از سوی دیگر، تعیین کردن محدودیت زمانی برای فروش‌های با تخفیف، بر تصمیم مشتریان برای خرید محصولات میتواند بسیار تاثیر گذار باشد.
همانطور که میبینید، طراحی UX تنها به زیبایی نرم افزار مربوط نمی شود، بلکه به ترکیب موضوعات، اولویت بندی اجزا، عنوان‌ها و ترتیب آنها نیز مربوط می شود. با این حال، مواردی که گفته شد باید از نظر UI نیز منطقی و پسندیده باشد.
کارت محصول
ارائه کردن برخی از مشخصات محصول میتواند برای خرید آگاهانه کاربران بسیار مهم و مفید باشد.
فکر کنید هنگام خرید فیزیکی و حضوری یک محصول چه مواردی برای مشتری مهم است؟ پس از پاسخگویی به این پرسش، کارت محصول را طراحی کنید.
- تصویر
- نام محصول
- توضیح کوتاه
- قیمت
با قرار دادن موارد بالا حداقل اطلاعات مربوط به محصول که باید در یک کارت ارائه شود آمده است.
یک نکته در مورد قیمت: قیمت گذاری بر تصمیمات خریداران تأثیر مستقیم می گذارد. بهتر است تمام تغییرات قیمت را به مشتری گزارش دهید. مخصوصا برای کارت محصول ذکر تخفیف ضروری است. خط زدن قیمت قدیمی و نوشتن قیمت جدید با رنگی متفاوت، یک تکنیک رایج طراحی محسوب میشود.
به مشتری بگویید که با خریدن این محصول چقدر پول صرفه‌جویی می کند.
اضافه کردن به سبد خرید
هنگامی که مشتری روی دکمه سبد در کارت محصول کلیک میکند، میتواند از طریق دیالوگی یا صفحه ای که در پایین صفحه باز میشود، محصول را به سبد خرید اضافه کند. برای کوتاه کردن فرآیند خرید، ویژگی های محصول را در این دیالگ نیز ذکر کنید.
توجه داشته باشید، انواع دیگر این محصول (Variations) که در انبار موجود نیستند باید ظاهر غیرفعال داشته باشند و برای مشتری قابل انتخاب نباشند.
هنگامی که مشتری محصولی را به سبد خرید اضافه می کند، باید به شکلی به او اعلام شود که این کار انجام شده. اسنکبارها (Snackbar) یا دیالوگ‌ها می توانند برای این منظور مناسب باشند. همچنین، دکمه «مشاهده سبد خرید» ممکن است برخی از مشتریان را سریعتر در به سوی ادامه فرایند خرید سوق دهد.
استفاده از Flutter در برنامه نویسی این فریم‌های طراحی شده، عملکرد کلی برنامه را بهبود می بخشد.
اینها تنها بعضی از نکات مهم طراحی صفحه اصلی یک برنامه تجارت الکترونیک هستند. در وبلاگ های بعدی، چندین صفحه اصلی دیگر را که ساخته‌ایم و همچنین سایر اجزای یک اپلیکیشن تجارت الکترونیک را بررسی خواهیم کرد.
اگر به دنیای تجارت الکترونیک علاقه‌مند هستید، اینجا کلیک کنید. همکاران ما با شما تماس میگیرند و در اینباره به شما کمک میکنند.
