پنجشنبه, ۹ فروردین, ۱۴۰۳ / 28 March, 2024
مجله ویستا

مفاهیم Navigation


مفاهیم Navigation
● مقدمه :
طراحی خوب درباره اینکه اثر مطلوب و گیرایی دارد و مندرجات را به خوبی توصیف می کند . بدون یک برنامه ریزی دقیق از اینکه چگونه محتویات سایت را به خوبی به هم اتصال دهید طراحی سایت دچار سر در گمی خواهد شد و با شکست مواجه می شود . کاربران باید بدانند که نقاط مبهم دیگر در کجا قرار دارند و چگونه باید به آنجا بروند و چنانچه هر کدام از این فاکتورها را فراموش کردید کاربران به سایتهای دیگر خواهند رفت.
● چرا Navigation مهم است
فرآیند جستجوو کاوش ( سایت پیمائی ) اغلب در قسمت چپ صفحه قرار داده می شود . در ابتدای طراحی یک سایت وب معمولا با صفحه ای ایجاد می کنید و سپس اتصالات دیگر را به صفحه خود اضافه می کنید . به هر جهت اگر شما دور اندیشی لازم در مورد اینکه چگونه کاربران در سایت شما گردش می کنند را نداشته باشید ، نتیجه آن سردرگمی در سایت خواهد بود .
Navigation فقط به معنای حرکت از یک مکان به مکان دیگر نیست بلکه Navigation جابه جایی از یک نقطه به نقطه دیگر از یک روش کنترل شده و سنجیده و با منظور معین می باشد .
بدون برنامه ریزی هیچگاه به یک پیمایش درست در سایت نخواهید رسید .
هنگامی که سوار ماشین می شوید احتمالا می خواهید به مغازه و یا سر کار بروید . در ابتدا خود را برای مسافرت آماده می کنید و در رسیدن به مقصد سر در گم هستید . ولی کار در مرحله دوم برایتان آسانتر است زیرا به راه و نشانه های آن آشنا شدید. حال احتمالا بدون فکر و اینکه چگونه از اتوبان استفاده کنید سفر را آغاز می کنید راحت هستید واحساس سر در گمی ندارید و در هر زمان می دانید که در کجا هستید . حالا به یک مسافرت به شهر جدید فکر کنید . چه احساسی دارید ؟ تردید درباره اینکه شما کجا هستید و چگونه به مقصد هدایت می شوید ؟ در ارتباط با همین احساس علامتهای متفاوتی برای راه مثل چراغهای خیابان و ساخت اتوبانها وجود دارند . کاربران جدید هم در هنگام دیدن سایت شما همین حس را دارند . آنها گردشگر هستند و نمی دانند که هنگامی که به صفحه اول سایت شما رسیدند به کجا باید بروند .
به عنوان یک طراح وب وظیفه شما این است که به جهت آنکه کاربران به راحتی از سایت شما لذت ببرند Navigation ایجاد کنید تا آنها به طور کلی با سایت آشنا شوند و تشخیص دهند که کجا هستند ؟ مطالعه این مسیر به زمان نیاز ندارد و با یک طراحی خوب و با کمک یک کلیک تمامی راه شناسانده می شود .
● مرورگرها و Navigation :
بیشتر معماری مرورگرهای وب با عوامل زیر توسعه داده می شود .
▪ دسترسی به لایه های مرورگر وب : شامل پروتکلهایی برای ارتباط با سایتهای دور، تنظیم http تا انواع گوناگونی از پروتکلهای سری مثل SSL
▪ لایه های Navigation : کاربرانی که در سایت بودند را نگه می دارد و به آنها کمک می کند که کجا بروند و می تواند شامل سیستمی باشد که نشان می دهد از کدام سرویس کاربران بازدید کردند .
▪ نمایش لایه ها : پنجره های مرورگر که صفحات درخواست شده کاربران را نشان می دهند .
هر مرورگر اجزاء منحصر به فردی دارد که در پیمودن سایت به کاربران کمک می کند . ولی اکثر مرورگرها در موارد زیر با هم اشتراک دارند .
ـ ابزار برگشت به عقب Tool Bar Back Button
ـ ابزار برگشت به جلو Tool Bar Forward Button
ـ میدان آدرس URL Address Field- Uniforme Resource Location
ـ تاریخچه مرورگر Browser History
ـ علاقه مندیهاBookmarks or Favorites
ـ نوار وضعیت status Bar
ـ رنگی کردن ابر اتصالات Color Hyper Link
یک تمرین معمولی برای استناد به المانهای Navigation در سایت وجود دارد . بعضی از طراحان در پایان صفحه یک ابر متن برای برگشت ایجاد می کنند که کاربر می تواند برای برگشت به صفحه اول روی آن کلیک کند.
- بقیه تغییرات رنگ اتصالات پیش فرض ممکن است کاربر را دچار سردرگمی در ارتباط با جایی که در آن قرار دارند بکند . بعلاوه این المانها برای کمک به کاربر طراحی شده است . بنابراین باید نسبت به Navigation از اهمیت دوم برخوردار باشد . کاربر نباید مجبور به استفاده از کلید Back باشد زیرا ممکن است راه خود را گم کند .
● Navigation اولیه و ثانویه
Navigation به طور عادی به ۲ نوع مقدماتی و ثانویه رده بندی شده است . Navigation مقدماتی شامل المانهای Navigationاست که در بیشتر مکانهای سایت در دسترس هستند.
▪ المانهای Navigation ثانوی : که به کاربر اجازه می دهد تا در مکانهای ویژه گردش کنند .
برای مثال خیلی از سایتها صفحاتی دارند که اطلاعاتی در مورد یک شرکت راارائه می دهند .
این Navigation های نوع دوم ممکن است اتصال درباره ما ( About Us) باشد . هنگامی که کاربر به صفحه About us ( درباره ما ) می رسد ممکن است در اینجا اتصال دیگری وجود داشته باشد . برای مثال ممکن است در آنجا اتصال برای اطلاعات سرمایه گذاری ، مکانهای دیگر و مطبوعات آزاد و ... باشد . این اتصالات جزء المانهای Navigation ثانوی هستند . زیرا آنها مربوط به صفحه درباره ما ( About Us ) هستند نه مربوط به صفحات دیگر سایت و بنابراین این اتصالات نمی توانند در نواحی دیگر سایت پیدا شوند .
● سلسله مراتب Navigation :
بیشترین جذابیت گرافیکی وب این است که هر صفحه بر روی هر سایت فقط با یک کلیک ایجاد می شود . این خاصیت محدودیتی که شما در دنیای خطی با آن مواجه بودید را از بین می برد . بیشتر فعالیتهای روزانه خود مثل خواندن ، کار کردن و رانندگی در نوع خطی دنبال می شوند . در ابتدا عملی را شروع میکنید و مرحله به مرحله ارائه میدهد تا تمام شود ولی این مدل از طراحی کمک میکند که محدودیتهای دنیای خطی از میان برداشته شود.
مکانی که در آنجا کار می کنید یک سلسله مراتبی دارد و یک سازمانبندی دینامیکی برای آن تعریف شده است . خانه شما نیز یک سلسله مراتب دارد و والدین دربالاترین جایگاه قرار دارند و بچه ها در زیر این لایه قرار دارند . این مفاهیم دقیقا بیان می کند که چگونه فایل سازماندهی و اداره میشوند. وب سایت نیز از مثالهایی که ذکر کردیم متفاوت نیست . در ساختار وب در قسمت بالا، صفحه خانگی(homepage) قرار دارد و زیر آن صفحات دیگر قرار دارند که طبق مثال قبل این صفحات همان بچه ها هستند .
این صفحات بصورت خطی نیستند و شاخه شاخه می باشند و باحجمهای متفاوت رشد کرده و وابسته به مفاهیمی هستند که هر شاخه را هدایت می کند .این ساختار به عنوان ساختار اطلاعات سایت شناخته شده است .
● آگاهی از موقعیت :
کاربرانی که می خواهند از سایت شما اطلاع پیدا کنند لازم است که ساختار سایت را بدانند و این مسئله باعث می شود که کاربران سر گرم شوند و با سایت بمانند . همیشه باید یک علامتی وجود داشته باشد که کاربران بوسیله آن از موقعیت خود آگاهی پیدا کنند ، آگاهی از موقعیت شامل آگاهی از مبداء و یا صفحات دیگری است که وابسته به صفحه ما هستند . خیلی از تکنیکهایی که برای آگاهی کاربران می تواند ایجاد شود شامل موارد زیر است :
▪ عنوان - سر فصل
عنوان هر صفحه ایجاد وسیله مؤثر برای دانستن و تعیین موقعیت جایی که در آن قرار دارند . محدودیت استفاده از این روش برای آگاه شدن از موقعیت در این است که در این روش فقط موقعیت مکان جاری نشان داده می شود و موقعیت های وابسته (نظیر صفحات بچه ) طبق مثال قبل را نشان نمی دهند .
▪ رنگها :
بعضی از سایتها از رنگهایی استفاده می کنند که اشاره به موقعیت دارند ( یعنی با بکار بردن درجات رنگ مختلف برای جاهای مختلف ) محدودیت استفاده از رنگها در این است که کاربر باید طرح رنگ را درک کند و سپس برای گردش در سایت بتواند با آن ارتباط برقرار کند . محدودیت دیگر استفاده از رنگها برای کاربرانی می باشد که از لحاظ بینایی دچار مشکل هستند و این استراتژی برای آنها بی اثر است .
▪ تصاویر :
تصاویر برای آگاهی از موقعیت علامت های مفیدی ایجاد می کنند . به عنوان مثال کلیدهایی که از آنها برای برنامه ریز روزانه استفاده می شود را در نظر بگیرید . اغلب یا بیشتر این کلیدها در محدوده دید قرار دارند و هر کلید نامی دارد و کلیدها در هر مکان ظاهر متفاوت دارند . این استراتژی برای آگاهی از موقعیت مؤثر تراست زیرا صفحات مادر و بچه از هر مکانی در محدوده دید قرار می گیرند .
▪ Cooki :
علائمی مثل خطوط اشاره بر مسیر (Navigation ) می توانند شما را در رسیدن به موقعیت جاری کمک کنند که این علامت برای حرکت کاربران در صفحات چند گانه مفید است .
▪ نقشه سایت :
نقشه سایت در اسناد جداگانه در HTML وجود دارند و هر صفحه از سایت می تواند با متون ساده و شرحهای گرافیکی به نمایش گذاشته شود . کاربران می توانند از اتصالات نقشه سایت برای رسیدن به صفحات دلخواه استفاده کنند . محدودیتی که در این روش وجود دارد این است که کاربران برای دیدن نقشه سایت مجبور به ترک صفحه جاری هستند .
● عمل Navigation ، نمادهای تصویری و نظارتها
سه کلیک برای مدیریت کاربران برای دسترسی به فایلها را به خاطر آورید . کاربران نباید در موقع گردش در سایت برای پیدا کردن اطلاعات درخواستی و سایتها بیشتر از ۳ بار بر روی اتصالات کلیک کنند .
این خطوط راهنما برای آگاهی وجستجو در سایتهای وب بسیار مهم است . مسیرهای لنگری مجهول کاربران را دچار سردرگمی کرده و آنها را از بازگشت به سایت نا امیدمی کنند . در نظر بگیرید که آیا چند رسانه ای ها قالبهایی جهت مسیریابی ایجاد می کنند و یا صرفا اضافی می باشند . به عنوان مثال اگر در سایت خود از Navigation Flash استفاده کنید ، برای مرورگرهایی که از Flash حمایت نمی کنند مشکل ایجاد می کنید . یک حس و دیدخوب جهت یابی برای کاربران خیلی مهم است . نوار ابزار Navigation باید خیلی ساده و روشن باشد و به درستی درک شود .
آیکونها خیلی عمومی و عامه پسند هستند و بیشتر مردم به آنها آشنا هستند . آیکونها ۲ نوع دارند :
▪ برچسب دار ، بدون بر چسب ؛
اگر لازم باشد که کاربران حدس بزنند که آیکون آنها را به کجا هدایت می کند این آیکون باید برچسب داشته باشند .
ـ بقیه اجزاء متداول Navigation به قرار زیر است :
۱) کلیدها
۲) نقشه های تصویری و نقاط اشاره گر ماوس
۳) بردارها
۴) جداول
۵) جداول Navigation و منوها
۶) منو باز شونده
● نگاهی به مرورگر :
مرورگرها بصورت محدودشده ای از Navigation حمایت می کنند . بنابراین برای کمک به کاربران در راه و غلبه بر محدودیتهای نرم افزاری با ایجاد Navigation های گسترده صفحه خود را طراحی کنید .
▪ دادن هویت به سایت در تمامی صفحات به منظور اینکه کاربران بدانند در کجا قرار دارند اجازه به کاربران برای آنکه بدانند در کجا قرار دارند، ایجاد یک لوگوی پیوسته که اغلب در گوشه سمت چپ صفحه نمایش قرار دارد .
▪ نشانه اختصاصی برای صفحه را به راحتی بسازید . هر صفحه باید بوسیله ابر اتصالات و جستجوگر به سایتهای دیگر متصل شود.
▪ از تگ < meta > و کدهای Script برای جلوگیری از دسترسی به تاریخچه مرورگر استفاده نکنید.
▪ بعضی از سایتها از تگ Meta برای تجدید کردن یک صفحه به منظور جلوگیری از بازگشت کاربران به صفحه ای که قبلا بازدید شده است استفاده می کنند .
▪ تاکید بر ساختارو معماری اطلاعات شما :
هر صفحه را به گونه ای درست کنید که ساختار و المانهای صفحه را نشان دهد و شامل اتصالات دیگری برای مرورکردن صفحات یا صفحات اصلی که در بالاترین نقطه ساختار قرار دارند باشد . این اتصالات نمی تواند نامهای عمومی مثل ( Go Top ) را داشته باشد اما باید نامی برای اشاره داشته باشند .
▪ تا آنجا که ممکن است رنگ لینکهای پیش فرض را عوض نکنید . با اتصال به صفحات بازدید نشده سایه آبی رنگ ایجاد می شود . استفاده از رنگهای پیش فرض به کاربران کمک می کند که بدانند کدام صفحه را بازدید کردند .
▪ نقشه سایت که شامل ساختار و اطلاعات مهم می باشد .
منبع : استاد آن‌لاین


همچنین مشاهده کنید