چگونه از لینک های داخلی استفاده کنیم؟
بیایید تصور کنید در حال طراحی وب سایت برای یک سایت خبری هستید ، احتمالاً کاربران شما می خواهند برخی از اطلاعاتی که مربوط به سوابق سیاست گذاری های جدید دولت ، شایعه ها و یا هر کلمه یا عبارت دیگری را که تا کنون به گوششون نخورده را بدانند و یا مثلا وقتی شما در حال طراحی چیزی کاملاً متفاوت ، مانند یک فرم پیچیده اظهارنامه مالیاتی آنلاین هستید، کاربران احتمالاً به توضیحات بیشتری در مورد قوانین و مقررات نیاز دارند. پاسخ به هر دو چالش در موارد بالا با الگوی خط آبی رنگی حل می شود که امروزه تقریباً در هر صفحه وب می توانید پیدا کنید: پیوندهای درون متنی، به زودی خواهید دید که می‌توانید ابعاد جدیدی به کار خود اضافه کنید.
تصور کنید کاربری دارد یک متن طولانی خبری درمورد مذاکرات ۵+۱ را می خواند و نویسنده لازم دارد نیم نگاه و یا اشاره ای به تاریخچه اتفاقاتی که بر تصمیم گیر فعلی این مذاکرات تاثیر گذاشته داشته باشد تا مخاطب از محتوا به اندازه کافی آگاه شود، چرا؟ چون اگر کاربران از این متن به اصطلاح خودمان سردرنیاورند بایک حرکت وبسایت مورد نظر را بسته و به سراغ وبسایت دیگری می‌روند. با استفاده از لینک های داخلی نه تنها کاربران را در درک مطلب و انجام تسک یاری خواهیم رساند، بلکه آن ها را در وبسایت خود نگه خواهیم داشت، از صفحه ای به صفحه ای. این هنر ماست. یکی از بهترین مثال های این مورد وبسایتهای خبری مانند نیویورک تایمز است. در این حالت کاربران، هر جا لازم بود از تاریخچه ها یا مفاهیم پیچیده عبور میکنند و در جایی که لازم است با یک کلیک درک بیشتری از مطلب خواهند داشت.
در تصویر بالا ، کلمات خاصی را می بینید که زیر آنها خط کشیده شده و آبی رنگ هستند. البته الزامی به این خط کشی وجود ندارد مثلا در مجله خبریForbes با حالت Hover مووس این خطوط آبی رنگ پدیدار میشوند.فراموش نکنید که لینک های داخلی یا Inline Linking ها با نام‌های دیگری مانند Hotline Linking، Piggybacking هم شناخته میشوند.
لینک های داخلی از بهم ریختگی مطالب جلوگیری میکنند و موجب انسجام مطلب نویسنده خواهند شد. و نکته جالب اینکه نیاز کاربران کنجکاوتر که به دنبال محتوای دقیق تر یا بیشتری هستند را هم پوشش داده اید.
۱- از شلوغی و بهم ریختگی و اسکرول طولانی جلوگیری کنیم.
۲- فوری و سیال کاربران سایتمون را به صفحات مورد نیازش هدایت کنیم.
۱: کلماتی که فکر میکنید نیاز به توضیح بیشتری برای شفاف سازی و فهم کاربر دارد را شناسایی و تبدیل به لینک داخلی کنید. ویکی پدیا بهترین نمونه این مثال است. به قول خودمان رشته کلام را از دست کاربران خارج نکنید.
۲: از رفتارهای مرسوم تبعیت کنید، چطوری؟ به شما خواهم گفت.
به طور معمول ، لینک های داخلی به رنگ آبی هستند و یک خط آبی زیر آن ها قرار میگیرد و هنگامی که کاربر مکان نمای موس را روی کلمه پیوند داده شده قرار می‌دهد ، پیکان ماوس تبدیل به یک دست می‌شود. این به کاربران اجازه می دهد بدانند که میتوانند با کلمات تعامل داشته باشند. گاهی این پیوند ها تنها آبی رنگ هستند و با اشاره گر موس خط آبی زیر آنها هویدا می‌شود. هدف این است که کاربران را با بردن به صفحه ای دیگر شگفت زده نکنید.
۳: وقتی کاربران نشانگر موس را نزدیک لینک داخلی بردند یک (Tooltips) بسیار ساده، مختصر و مفید نشان دهید. کاربران را برای مقصد بعدی آماده کنید، همین!
۴: به کاربران این فرصت را بدهید که هم OPEN NEWTAP کنند و هم در همان صفحه ای که هستند اطلاعات بیشتر را بخوانند.
یادمون نره که هر راه حلی میتونه یه دردسر برامون بتراشه پس بهتره ازشون آگاه باشیم و وقتی آگاه باشیم اون زمان تصمیم میگیریم که خوبیش و به بدیش ترجیح بدیم یا نه.
برای اینکه تصمیم بگیرید وقتی کاربران روی لینک شما کلیک میکنند آنها را به صفحه جدید ببرید یا محتوا صفحه فعلی را به روز کنید تصمیم با شماست، اگر محتوای لینک مثلا یک فایل PDF است شک نکنید که تب جدید باز کنید. اما گاهی که محتوای لینک در صفحه فعلی باز می شود کاربران نمیدانند با یک کلیک روی بازگشت میتوانند به صفحه قبلی برگردند، بنابراین احساس از دست دادن اطلاعات خواهند داشت.
این تصمیم شماست که در کجا چه تصمیمی بگیرید، فراموش نکنید وظیفه یاtask کاربر را نسبت به این الگو می شود.
پیوندهای داخلی (Inline Linking) الگوهای طراحی رابط کاربری است که طراحان از آن برای کمک به کاربران در یافتن اطلاعات اضافی در مورد اصطلاحاتی که به آن علاقه دارند یا نسبت به آن گیج هستند ، استفاده می کنند. لینکهای داخلی یا در صفحه مجزا و یا در صفحه فعلی باز میشوند و باعث انسجام متن شما میشوند.
Hero Image: Author/Copyright holder: Christian Campos. Copyright terms and license: CC BY 2.0.
Jenifer Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, 2010
Martijn van Welie, Pattern Library, 2008: www.welie.com/patterns
