هنگامی که در جهان، دستگاه های تلفن همراه بیشتر از رایانه های رومیزی توجهات را به خود جلب کردند، طراحان بیشتر بر تجربه کاربر از ظاهر سایت متمرکز شدند. اگرچه که واسط کاربری (زمانیکه کاربر در حال ظاهر سایت است (UI)) در طراحی های سازگار با موبایل، نقش مهمی ایفا می کند اما تجربه کاربر از ظاهر سایت (UX) هم به همان اندازه مهم است؛ خصوصاً اکنون که تنوع دستگاه ها زیاد است و به تبع آن تجربیات کاربران نیز متفاوت خواهد بود.
تجربه کاربر از ظاهر سایت، چیزی فراتر از مرزهای گرافیکی و زیبایی شناسی است. در این راستا، راحول وارشنی یکی از طراحان foster.fm می گوید:
طراحی واسط کاربری بدون توجه به تجربه کاربر از رویت سایت، مانند نقاشی کردن بدون فکر بر روی بوم است.
راحول، قیاس درستی از این موضوع داشته است. شما ممکن است جذاب ترین، کاربرپسندترین، منحصر به فردترین و کاربردی ترین وب سایت را داشته باشید اما اگر تجربه کاربر از رویت سایت توسط موبایل را مد نظر قرار نداده باشید، همانند این است که بدون هیچگونه تفکر و اندیشه ای، نقاشی کرده اید.
اما چه طور می توان تجربه خوب و بد از رویت سایت با موبایل را از هم جدا نمود؟ البته باید گفت که جدا کردن مؤلفه های کلیدی مؤثر در طراحی کاربر محور و بهینه سازی آن، دشوار نیست. در این جا چند مورد از بهترین روش ها که به شما در این امر کمک خواهند نمود، ذکر می شوند:
استراتژی «اول موبایل» را نادیده نگیرید.
اگر قرار است وب سایت شما با موبایل مشاهده شود، پس با استفاده از استراتژی «اول موبایل»، رسم سنتی در طراحی وب سایت را بشکنید. وقتی که می دانید بسیاری از کاربران از طریق موبایل، سایت شما را مشاهده می کنند، این تکنیک هیچ ضرری نخواهد داشت. همان طور که سایت codemyviews مطرح می کند، طراحی وب سایت های موبایلی، خوشایند نیست زیرا در حال حاضر، 2/1 میلیارد کاربر موبایلی در سراسر جهان وجود دارد و به نظر نمی رسد که به زودی این تعداد کاهش یابد (حتی احتمال دارد که در آینده این تعداد افزایش یابد).
این موضوع ممکن است در ابتدا چالش برانگیز به نظر برسد، اما اگر شما می خواهید قبل از هر چیزی و اول از همه به کاربر خود توجه کنید، ارزشش را دارد.
اینکه هدف شما داشتن وب سایتی ساده، واضح و سازگار با موبایل است، به این معنا نیست که نباید طراحی پیچیده ای داشته باشد. سایت Karimrashid.com با طراحی واضح و یکدست، پاسخگو و درجه یک خود، مثالی کامل از ترکیب سادگی و پیچیدگی است.
لایه های روان/ انعطاف پذیر ایجاد نمایید.
اندازه صفحات نمایش متفاوت است و شما باید لایه ای را ایجاد نمایید که با همه آنها به طور یکپارچه سازگار باشد. خوشبختانه امروزه لایه های انعطاف پذیر وجود دارند!
لایه های انعطاف پذیر به یک استاندارد در میان طراحان وب تبدیل شده اند. در طراحی این لایه ها به جای اندازه گیریهای دقیق مانند پیکسل، از درصد استفاده می شود. این طراحی را می توان نوعی حیله دانست اما مطمئن باشید که با استفاده از این روش، بسیاری از کاربران راحت تر از سایت شما استفاده خواهند کرد.
کارایی را در فرآیند بهینه سازی سایت برای موبایل، هدف خود قرار دهید.
کارایی چیست؟ آن چیزی است که شما به بازدیدکنندگان خود ارائه می دهید تا کارهایشان را سریع انجام دهند. بر مبنای هدف وب سایت شما، بهتر است همه ابزارها از قبیل یافتن نزدیکترین فروشگاه، جستجوی محصول، بررسی محصول و یا تبدیل ارز، به کاربر برای انجام سریع تر کارهای مورد نظر و رسیدن به اهدافش، کمک نماید. سایت Purina به عنوان یک ارائه دهنده مواد غذایی برای حیوانات خانگی، یک مثال خوب از نحوه ساده کردن انجام کارها در صفحه وب است. صفحه اصلی دارای کادر جستجو است که در آن می توانید هر چیزی که به دنبالش هستید را جستجو نمایید. در پایین آن دو ستون جداگانه برای انواع مواد غذایی حیوانات است. کل وب سایت با استفاده از ستون، دکمه ها، ابزارها و عناصر طوری طراحی شده است که می توانید بهترین نوع از مواد غذایی حیوان خانگی را مثل آب خوردن انتخاب و سپس خرید نمایید.
کاربرانتان را شناسایی کنید.
سعی نکنید که فقط پلی برای معاملات باشید، زیرا ممکن است این امر برای شما گران تمام شود و هیچکس از این موضوع خوشش نمی آید. اول ببینید چه کسانی کاربران شما هستند و سپس رفتار آنها را در زمان دیدن وب سایت حدس بزنید. همچنین عواملی که باعث بروز آن رفتار می شود را مشخص نمایید. کاربران مدرن به دو دسته تقسیم می شوند:
- کاربرانی که بدون هدف در حال مشاهده سایت هستند.
- کاربرانی که برای انجام کاری خاص در حال مشاهده سایت هستند. هر کدام از این گروه ها بر اساس نیازهایشان به قابلیت های مختلف احتیاج دارند.
حدس زدن و شناسایی کاربران وب سایت های فروشگاهی بادی شاپ http://www.thebodyshop-usa.com/ سخت نیست زیرا در تمام صفحات از خود اثری به جا می گذارند. از آن جایی که بادی شاپ بر مواد طبیعی و فعالیت های اجتماعی، تغییرات و انتخاب سبز، گزارش معاملات، مراسم و دیگر رویدادهای اجتماعی متمرکز است، یک طراحی توسعه یافته به شمار می آید.
همیشه به راهنماها و دستورالعملهای توسعه دهنده توجه کنید.
بر مبنای پلتفرمی که استفاده می کنید لازم است که به خط مشی واسط کاربری توجه داشته باشید. برخی از پلتفرم ها انعطاف پذیری بیشتری را نسبت به دیگر پلتفرم ها ارائه می دهند. در همه پلتفرم ها، بهتر است برخی از عناصر کلیدی برند و یا «امضا» باقی بمانند.
یک توسعه دهنده اپل وقتی می خواهد استراتژی طراحی، عناصر واسط کاربری، تصاویر، آیکون و غیره را انتخاب نماید، باید «استانداردهای اپل» و «خط مشی واسط کاربری ios" را مد نظر قرار دهد. از طرفی دیگر، یک توسعه دهنده اندروید، باید همه چیز در مورد اجزاء، سبک، قابلیت استفاده و چیدمان رایج و معمول اپلیکیشن های اندروید را با استفاده از «راهنمای توسعه دهندگان اندروید» یاد بگیرد.
همه محتویات سایت را در دسترس همه کاربران قرار دهید.
برخی از طراحان، به جای اینکه لایه ها را انعطاف پذیر طراحی کنند، آن ها را برای کاربران موبایلی پنهان می کنند. گاهی اوقات این کار دشوار است و یا ممکن است محتوای لایه های موبایلی، بیش از حد شود. این رویکرد، نادرست است. به کاربرانتان یک نسخه پر محتواتر از وب سایت یا نرم افزارتان بدهید که نه تنها ناعادلانه نباشد بلکه نتیجه معکوس ندهد و باعث از دست دادن مشتریان نشود. شاید مجبور باشید لایه ها را ساده تر طراحی کنید، برای کاهش بهم ریختگی، مطالب را از صفحه ای به صفحه ای دیگر منتقل نمایید و یا فقط سعی کنید همه چیز را بهتر سازماندهی کنید؛ اما این امکان باید وجود داشته باشد.
نسخه کامپیوتری سایت BBC را با نسخه موبایلی آن مقایسه کنید. تمام انواع اطلاعات در سراسر صفحه نمایش قرار داده شده اند در صورتی که می توانست ساده تر طراحی شود. در نسخه موبایلی آن، برخی از تصاویر کاهش می یابند (در حالی که در مقالات در دسترس هستند) اما همه عناوین به طرز چشمگیری در صفحه نمایش موبایل، قابل مشاهده هستند.
با توجه به لمسی بودن موبایل ها طراحی کنید.
این نکته را به خاطر داشته باشید که کاربر موبایلی به جای ماوس از انگشتانش استفاده می کند. شما باید به گونه ای طراحی کنید که سایت برای همه نوع اندازه و شکل از انگشت ها مناسب و راحت باشد. به عنوان مثال کاربر نباید برای پر کردن فرم و یا فشار دادن دکمه، در مضیقه باشد و یا بیش از حد زوم کند و ضربه بزند. این مسائل در دستگاه های کوچک خیلی رایج و معمول است که در طراحی باید به ورودی لمسی به اندازه کافی بزرگ و فضای حرکات انگشت برای انجام کار توجه شود.
یک جدول از رویدادهای لمسی وجود دارد که توسط Peter-Paul Koch تهیه شده است و می تواند مفید باشد. اینکه چگونه می توان اجزای سایت (و دیگر فعالیت ها) را لمس کرد، ممکن است تا حد زیادی به سازگاری مرورگر و موبایل بستگی داشته باشد.
از ابزارهای فشرده سازی استفاده کنید.
امروزه، تعداد ابزارهای موجود برای آسان نمودن کار طراحان، غیر قابل شمارش است. شما می توانید از کمپرسور اسکریپت از قبیل کمپرسور HTML و یا فشرده سازی Gzip که به طور خودکار عناصر غیر ضروری، فضای سفید و یا کدها را حذف می کنند، استفاده نمایید. CSS minifier یا کمپرسور CSS و دیگر ابزارها نیز به شما اجازه می دهند که برای بهبود عملکرد، کدهای CSS را اضافه کنید. فشرده سازی تصاویر نیز به همین اندازه مهم است؛ با استفاده از EWWW Image Optimizer، smush.it، opting و jpegtran می توانید اندازه فایل های .jpeg و .png خود را ضمن ثابت ماندن کیفیت، کاهش دهید.
در اینجا، نمونه کاری قرار دارد که توسط رای جانسون طراحی شده است. نسخه موبایلی وب سایت پر از تصاویر دیدنی است اما با نسخه کامپیوتری آن تفاوتی ندارد. بدون شک، راز بارگذاری سریع این تصاویر، بهینه سازی آن هاست.
