راز ساخت لینک های عالی

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

یک لینک خوب با دکمه متفاوت است

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

یک لینک هیچ عملی انجام نمی دهد بلکه داده ها را به متصل می کند. در حالی که دکمه یا Button ها هستند که عملگری را به کار می اندازند مانند دکمه چاپ بر روی بعضی صفحات وب.

یک لینک مقصود خود را مشخص می کند

مرکز مشکلات استفاده از یک لینک این است که باید المان anchor آن به قدری منعطف باشد که بتوان به روش های مختلف از آن استفاده کرد بدون آنکه خراب شود. برای مثال mailto نباید یک لینک باشد (در واقع یک اکشن است نه یک قطعه از اطلاعات).

ما heading های متنوعی داریم که برخی از آن ها بی استفاده هستند. در حالی که ما تنها یک anchor element داریم. خیلی خوب می شد اگر ما می توانستیم از المان های متفاوتی برای لینک های داخلی و یا خارجی برای معنا دادن بهتر استفاده کنیم. اما در حال حاضر ما تنها راهی که برای معنا دهی به لینک ها داریم این است که برای لینک های خارجی از مسیر مطلق یا به اصطلاح Absolute Path استفاده کنیم و برای لینک های داخلی از مسیر های نسبی یا Relative Path.

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

مطمئنا کاربران به تجربه درکی از چگونگی کارکرد وب دارند. اما نکته اصلی همچنان باقی است، کاربران ترجیح می دهند که UI به طور روشنی این تجربه را بیان کند. در حالی که عده ایی بر این نظر هستند که لینک های داخلی باید مطابق برند سایت باشند تا مشخص کنند که به چه چیزی اشاره می کنند، در مقابل استدلال دیگر موجهی هست که می گوید استایل پیش فرض یا Default (Blue, Underlined, System Fonts) برای لینک های خروجی، نه تنها رابط کاربری را ساده می کند، بلکه مشخص می کند که داده ایی که لینک به آن اشاره می کند خارج از دامنه وب سایت قرار دارد.

اینکه آیا نا هماهنگی لینک ها می تواند کاربران را سر در گم کند یا خیر باید موردی بررسی شود. اما در مواردی که استایل لینک های داخلی و خارجی به جهت کاربردی بودن به یک شیوه است، همان شیوه استایل Default بهترین است.

یک لینک خوب بازدید شده است

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

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

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

یک لینک خوب همیشه آبی است

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

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

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

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

لینک خوب از خط زیرین استفاده می کند

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

اما اگر فکر می کنید که حذف Underline از لینک ها روش خوبی نیست دو راه دارید. اول آنکه این خط را با نقطه چین پیاده سازی کنید یا اینکه برای لینک ها رنگ پس زمینه متفاوتی در نظر بگیرید.

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

یک لینک خوب برجسته است

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

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

یک لینک خوب متن کوتاه خوبی دارد

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

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

یک لینک خوب کمکی برای تجربه کاربری است

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

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

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