تأثیر استفاده از آیکون‌ها در تجربه کاربری وب سایت

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

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

جستجویابی ارتقاء یافته

آیکون ها طبیعتا به کاربران کمک می کنند تا در طراحی سایت بر اساس موارد بصری جستجو کنند. بهترین آیکون ها آن دسته آیکون هایی می باشند که مردم بیشتر می شناسند و از این رو شما همیشه می خواهید در ابتدا با این موارد همراه شوید.

اما شما می توانید آیکون هایی را برای لینک ها با برچسب های متنی به منظور افزایش کاربرد وب سایت نیز طراحی کنید.

به سایت نمونه کار TIM ROUSSILHE نگاه بی اندازید که از یک منو جستجویابی عمودی استفاده کرده است.

TIM آیکون هایی را در بالای هر برچسب لینک قرار داده است تا تشخیص میان هدف و عملکرد مشخص شود. این استراتژی یکی از واضح ترین متد ها برای استفاده در زمینه آیکون ها می باشد، زیرا بسیار برای دیدن ساده است و به راحتی قابل درک می باشد.

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

اما حتی با وجود وب سایتی مانند MY OWN BIKE، شما می توانید حداقل حدس بزنید که لینک ها در کجا قرار دارند و به کدام بخش ها هدایت می شوند. این وب سایت به طور کامل به زبان آلمانی است، اما آیکون ها هم چنان مورد اساسی در این جا محسوب می شوند که می توانند منظور و هدف را به کاربران منتقل کنند.

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

این منو در وب سایت INC دیگر مثالی از نشان دادن این موضوع است که آیکون ها چگونه در جستجویابی قرار می گیرند.

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

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

دیگر گرایش محبوب مربوط به مگا منو کشویی جستجویابی می باشد. این مورد می تواند در وب سایت های نظیر MASHABLE یافت شود و هر لینک دارای یک فلش به سمت پایین کوچک می باشد تا منو کشویی را نمایان سازد.

این آیکون ها بسیار ضروری می باشند، اما آن ها تجربه کاربری را بسیار بهبود می بخشند. بیشتر کاربران متوجه نشانه فلشی می شوند و آن ها می دانند که به چه معنا است.

البته این جستجویابی می تواند بدون فلش ها نیز کار کند. در هر صورت، در این جا هیچ انکاری وجود ندارد که آیکون ها به شفاف سازی اهداف کمک می کنند و جستجویابی در سایت را بسیار ساده تر می سازند.

موارد بصری برای تشویق رفتارها و عملکرد های کاربران

جستجویابی می تواند فراتر از نوار منو جستجویابی بالای صفحه سایت برود. این امر می تواند لینک هایی را در بخش اصلی صفحه وب سایت و یا در بخش کناری صفحات سایت در بر بگیرد که به کاربران کمک می نماید تا راه خود را در سایت ها جستجو کنند.

آیکون ها هم چنین برای لینک ها در بخش اصلی نیز بسیار عالی می باشند، البته اگر پایدار و منسجم باشند. برای مثال در صفحه هوم سایت MEDIA TEMPLE شما جدول های اندکی را با لینک های "بیشتر بخوانید یا READ MORE" در رنگ های متفاوتی می یابید.

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

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

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

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

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

این مورد به شما اجازه می دهد تا بدانید که این دکمه به معنای دانلود کردن فایل است.

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

آیکون ها می توانند برای کمک به جذب هر بیشتر توجه کاربران به دکمه های CTA به کار روند و بازدیدکنندگان را ترغیب به کلیک کردن کنند. RESUMEBAKING یک مثال عالی در این زمینه می باشد که دکمه دعوت به عمل آن ها با آیکون هایی که فلش های خمیده ای دارند، احاطه شده است.

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

هنوز هم در این جا ابهام اندکی وجود دارد، اما در هر صورت موردی است که عملی می شود. کاربران بسیاری تنها این آیکون ها + فلش ها را مشاهده می کنند و روی دکمه ای که توجه بسیاری را به خود جلب می نماید، کلیک می نمایند.

توضیحات در فرم ها

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

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

به وب سایت LIFE COULD BE BETTER نگاهی بی اندازید که دارای یک فرم ثبت نام ایمیل ثابت در پایین صفحه می باشد. این مورد شامل یک آیکون پاکت نامه کوچک درست در کنار فرم می باشد که نشان می دهد برای چه چیزی است و توجه کاربران را به خود جلب می نماید.

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

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

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

من مثال عالی را در صفحه سایت WEBDAM TRIAL پیدا نمودم که از آیکون های کاستوم و سفارشی برای هر فیلد استفاده می نماید.

این آیکون ها به نظر حیرت انگیز می آیند و آن ها با رابط کاربری به خوبی عجین شده اند.

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

من تنها پیشنهاد می کنم تا آیکون های مانند این وب سایت را زمانی به کار ببرید که فرم وب سایت شما بیشتر از 3 یا 4 فیلد در بر ندارد. در غیر این صورت می تواند باعث تخریب کاربردی بودن فرم و در نهایت وب سایت شود.

ویژگی ها یا امکانات وب سایت

هر شخص تازه وارد، تجارت های کوچک و یا اپلیکیشن های تحت وب سایت دارای یک سری امکانات و دلایلی برای جذب کردن اشخاص به وب سایت شان می باشند. شما می توانید این ویژگی ها را لیست کنید، اما این مورد تنها مخاطبین تان را خسته می کند.

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

به عنوان مثال به آیکون های موجود در وب سایت LIGHTCMS توجه کنید. آنها بسیار باریک و روشن می باشند و از این رو به راحتی در صفحه ترکیب می شوند.

اما آن ها هم چنین ویژگی ها و امکانات موجود در سایت را مشخص می سازند و به خوانندگان به سرعت کمک می کنند تا صفحه هوم را مرور و بررسی کنند. این آیکون ها به تنهایی ممکن نیست بتوانند باعث فروش سایت LIGHTCMS شوند، اما می توانند به مشخص کردن این که سیستم عامل چیست و چرا مفید و کاربردی می باشد، بسیار کمک کنند.

در این جا طراحی بسیار مشابه ای در صفحه DISQUS FEATURE همراه با آیکون های کاستوم و سفارشی وجود دارد که در کنار ویژگی های مختلف و متفاوت، لیست شده اند.

من واقعا این طراحی را دوست دارم، زیرا آیکون ها به طرز زیبایی با برند DISQUS ترکیب و یکی می شوند.

اگرچه DISQUS این آیکون ها را از SCRATCH می سازد، اما شما قطعا نیازی ندارید تا این کار را انجام دهید. در این جا مجموعه آیکون های رایگان متعددی وجود دارد که شما می توانید دانلود کرده و برای هر چیزی که نیاز دارید استفاده نمایید.

جمع بندی و خلاصه

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

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

منبع

gowebsite.ir