مجله طراحی سایت روز

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

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

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

پیمایش پیشرفته:

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

اما می توانید برای استفاده واضح تر ، آیکون هایی را برای پیوندها با متن برچسب طراحی کنید.

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

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

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

منوی Inc این مثال عالی دیگری است که نشان می دهد چگونه آیکون ها به ناوبری متصل هستند.

در پیوند منو از نماد همبرگر استفاده می شود اما در زیر آن متن دارای برچسب نیز با عنوان "منو" خوانده شده است. این هدف نماد را روشن می کند و کاربران تلفن همراه را برای یافتن پیمایش آسان می کند.

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

روند محبوب دیگر منوی کشویی mega navigation است. این را می توان در سایتهایی مانند Mashable یافت و هر پیوند دارای یک پیکان کوچک رو به پایین است تا یک منوی کشویی را نشان دهد.این نمادها لازم نیستند اما واقعاً باعث بهبود تجربه می شوند. بیشتر کاربران نماد پیکان را تشخیص می دهند و معنی آن را می دانند.البته این پیمایش می تواند بدون فلش کار کند. اما نمی توان انکار کرد که نمادها به روشن شدن هدف کمک می کنند و مرور سایت را بسیار ساده تر می کنند.

تصاویری برای تشویق رفتار:

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

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

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

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

یکی از موارد برجسته درون صفحه ای دکمه Call to Action است که به اختصار CTA نامیده می شود. آیکون ها می توانند برای CTA هایی که هدف خاصی دارند بسیار خوب کار کنند.

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

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

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

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

توضیحات فرم:

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

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

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

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

ویژگی ها و اشاره گرها:

هر استارت آپ جدید ، کسب و کار کوچک یا webapp دارای یک سری ویژگی ها و دلایل برای جذب افراد در سایت است. می توانید این ویژگی ها را لیست کنید اما این معمولاً مخاطب را خسته می کند.

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

دسته بندی کردن:

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