وبلاگ

لایه ها، فرم ها، فونت ها و موارد دیگر، چیزهایی هستند که در هنگام طراحی وبسایت باید آنها را در نظر بگیرید. جدای از آن شما باید در رابطه با اینکه این المان ها به چه صورت نمایش می یابند نیز تصمیم بگیرید. حال اگر بازدید کننده از یک تلفن هوشمند استفاده کند این موضوع چندین برابر مهم می شود. 

در این جا قسمت داریم نکات کلیدی را به شما بگویم که باعث می شوند به آن تجربه کاربری دلخواه خود دست پیدا کنید.

۱. تعاملات را در هرمکان که توانستید قرار دهید

استفاده از حالت های Hover، Rollover، انیمیشن و چیزهایی از این قبیل باعث می شوند که وبسایت شما سرزنده و شاداب به نظر برسد. به وبسایت‌تان قابلیت های لمس کردن و تعاملات مناسب با آن را اضافه کنید. در کنار این مورد از انیمیشن و ایجاد تحرک در عناصر مختلف نیز استفاده کنید به این دلیل که باعث می شود بیشترین توجه کاربر به خود را جلب کند. یک صفحه ایستا هیچوقت به اندازه یک صفحه متحرک جذاب و سرزنده نیست. 

۲. استفاده از carousel را فراموش کنید

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

۳. ساختن در یک محدوده برای توسعه در آینده

اگر رویکرد شما این است که به هر قیمتی شده در کوتاه‌ترین زمان ممکن نسخه ای را عرضه کنید، پس بهتر است روی ویژگی های حیاتی و کلیدی تمرکز کنید. مشکل این حالت در این است که اکثر توسعه دهندگان واقعا نمی توانند در یک محدوده خاص صرفا طراحی کنند. همیشه سعی در این داشته باشید که ابتدای کار چیزهای پیچیده را طراحی کنید. 

۴. یادتان باشد که بعضی چیزها را کم کنید

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

۵. طراحی برای ساده بودن

همیشه استرس و ریسکی وجود دارد که باعث می شود کاربران وبسایت اشتیاق و علاقه خود را از دست بدهند. این ریسک اغلب اوقات به دلیل استفاده از متغیرهای خارجی است. به صورت ایده‌آل همیشه به خاطر بسپارید که از رابط کاربری ساده استفاده کنید، از طراحی المنت های سنگین و به درد نخور دوری کنید و همه چیز را تا جایی که امکان دارد ساده نگه دارید.

۶. از یک ویژگی تاجایی که می توانید استفاده کنید

یکی از کلیدی‌ترین ستون های تجربه کاربری مقاومت یا ثبات است. این مفهوم بدین معناست که تا جایی می توانید برای طراحی قسمت های مختلف وبسایت از یک کتابخانه استفاده کنید. حال آن کتاب خانه باید نسخه واکنشگرای وبسایت را نیز بسازد و با اندازه های مختلف صفحه نمایش سازگار باشد. واکنشگرا بودن وبسایت یکی از بخش های این ستون به حساب می آید.

۷. به بهترین ها گوش دهید

اگر یکی از آن دست مدیران و توسعه دهندگانی هستید که با چالش های تجربه کاربری همراه نبوده‌اید باید بگویم که برای تجربه کاربری موبایل هر دو شرکت بزرگ گوگل و اپل مقالاتی در این رابطه ارائه داده‌اند. این مقالات بهترین مکان برای شروع به عنوان یک طراح است. 

۸. روی توانایی کاربران تمرکز کنید

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

۹. ترازبندی متون را به صورت خوانا قرار دهید

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

۱۰. ابزارها و المان های مورد نیاز را به خاطر بسپارید

به یاد بسپارید که هر وبسایتی برای داشتن تجربه کاربری موفق باید دارای سرعت لود بسیار بالا، گواهینامه SSL، تصاویر کم حجم SVG و… باشد. هشدارهای امنیتی و تصاویر با حجم بالا تنها باعث می شود که کاربران از وبسایت شما دور شوند و از کاوش در وبسایت خودداری کنند. 

بعضی اوقات مفاهیم و ایده ها به آرامی در یک جامعه برنامه نویسی رشد می کنند ، گاهی اوقات به نظر می رسد که در یک زمان کوتاه ظاهر می شوند. از آنجا که React در 2 سال گذشته به صحنه آمد ، به نظر می رسد  مقالاتی که داده های قابل تغییر و تغییرناپذیر را ذکر می کنند ، چند برابر شده ، همچنین کتابخانه هایی مانند Immutable.js به کاربران امکان می دهد از "داده های غیرقابل تغییر" استفاده کنند. من نمی خواهم به آن کتابخانه ها بپردازم ، اما فکر می کنم مفید است که یک راهنمایی سریع راجع به اینکه داده های غیرقابل تغییر در واقع چیست ، چه تفاوتی با داده های قابل تغییر دارد و چرا با اهمیت است

آبجکت قابل تغییر حالتی است که state می تواند بعد از ایجاد تغییر یابد. آبجکت تغییر ناپذیر حالتی است که state بعد از ایجاد آن نمی تواند تغییر یابد. نمونه هایی از مقادیر بومی جاوا اسکریپت که تغییر ناپذیر هستند اعداد و رشته ها هستند. نمونه هایی از مقادیر بومی جاوا اسکریپت که قابل تغییر هستند شامل آبجکت ، آرایه ها ، توابع ، کلاس ها است.

چند مثال رو با هم میبینیم .

let a = {
    foo: 'bar'
};

let b = a;

a.foo = 'test';

console.log(b.foo); // test
console.log(a === b) // true

let a = 'test';
let b = a;
a = a.substring(2);

console.log(a) //st
console.log(b) //test
console.log(a === b) //false

let a = ['foo', 'bar'];
let b = a;

a.push('baz')

console.log(b); // ['foo', 'bar', 'baz']
console.log(a === b) // true

let a = 1;
let b = a;
a++;

console.log(a) //2
console.log(b) //1
console.log(a === b) //false

آنچه می بینیم این است که برای مقادیر قابل تغییر ،  به روزرسانی state در همه منابع به آن متغیر اعمال می شود. بنابراین تغییر یک مقدار در یک مکان ، آن را برای همه مراجع به آن آبجکت تغییر می دهد. برای انواع داده های تغییر ناپذیر ، ما هیچ راهی برای تغییر state داخلی داده ها نداریم ، بنابراین مرجع همیشه به یک آبجکت جدید تبدیل می شود. بزرگترین پیامد این امر این است که برای داده های غیرقابل تغییر ، برابری قابل اطمینان تر است .