آموزش متدولوژی و تکنولوژی طراحی وب CIW (بخش چهارم)

اهمیت کارآیی مخاطبین (کاربران)

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

● کیفیت مندرجات : کیفیت منرجات ارائه شده در یک سایت ارزش محصولات سایت را ارائه می دهد .

● Navigation آسان و کاربردی: کاربران باید بتوانند خیلی راحت و آسان و با کوشش کم بوسیله Navigation سایت را بپیمایند و الا به سایت دیگری خواهند رفت .

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

● قابلیت جستجو : همه کاربران در مورد استفاده از یک موتور جستجو شبیه به هم هستند . بنابراین توانایی ایجاد یک موتور جستجو گر بازیابی و هویت مندرجات شما را فراهم می کند . تکنولوژی نرم افزار
قبل از آزمایش :

اولین مرحله از آزمایش کارآیی توسعه سایت مربوط به نقطه پایانی آن یعنی محصولات می باشد . یک آزمایش کارآیی نمی تواند ارزیابی دقیقی را ایجاد کند . چه کسی باید این آزمایش را انجام دهد ؟
این آزمایش می تواند با حداقل 5 الی 6 نفر شروع شود آزمایش سایت با اعضاء تیمهای طراحی دیگر غیر منطقی بنظر می رسد . بعلاوه موضوع تست باید برای کاربران واقعی سایت طرح گردد .برای نمونه شما نباید سایت مربوط به تجارت سهام را با گروه سنی جوانان تست کنید و یا نباید فقط خود را محدود به دلالان سهام کنید . ولی یک تست خوب می تواند شامل همه گروهها باشد . مثلا در این مثال شما نباید آزمایش خود رابروی کسانی که از تجارت کم می دانند یا اصلاً تا بحال تجارت انجام نداده اند مطرح کنید.

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

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

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

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

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

● اندازه زمان بارگذاری و بروز رسانی سریع با استفاده از پهنای باند در دسترس توسعه یافته است بنابراین بروز رسانی به خدمات اتصالی پر هزینه تری یا زمان بیشتری احتیاج دارد .
مطابق با سایت http://statmarket.com.smمیکروسافت/ Internet Explorer ورژن 4 در بسیاری از موارد به عنوان مرورگر از Ayvest استفاده شده است.

قابلیت آزمایش :

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


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

نتایج :

بعد از اتمام آزمایش مصاحبه ای با شرکت کنندگان داشته باشید . باید اغلب به آنها در بیان کردن مواردی که از یاد بردند کمک کنید آنها ممکن است فرصت کافی برای نوشتن نیز نداشته باشند . باید سئوالات زیر را از آنها بپرسید :
1- احساسات اولیه شما بعد از دیدن سایت چه بود ؟
2- عکسهای سایت چه نوع شرکتی را برای شما به تصویر می کشد ؟
3- آیا طرح اصلی ساختار سایت را درک کردید ؟
4- عناصر و المانهای عمده سایت را به یاد دارید ؟

درخواست نتایج :

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

تمرین محاسبه کارآیی یک وب سایت :

به سایت http://www.ideonova.com/ بروید و داخل سایت را بپیمائید و آسان و در مورد گردش در آن و نحوه ارایه محصولات نظر خود را بیان کنید.
1- این سایت ساختار خوبی دارد و اطلاعات بصورت شفاف در هر صفحه ای قرار دارد و لینکهایی نیز برای دسترسی به نواحی دیگر سایت قرار دارد . این لینکها مخصوصا برای پیمایش راحت و پیدا کردن سریع اطلاعات بنا شده است .

2- به سایت http://store.nordstrom.com/ و در میان سایت پیمایش کنید و سعی کنید که آیتمهای ویژه آن را پیدا کنید ( اسم – سایز – رنگ و به جلو )
ساختار این سایت به خوبی سایت قبلی نیست و علت اصلی آن اینست که بیشتر اطلاعات در یک صفحه قرار دارد و ضروری نیست که از یک صفحه به صفحه دیگر بپیمائید بعلاوه سایت دارای گروهی از Navigation های تعریف شده خوب در بالای صفحه برای پیمایش می باشد .لیست لینکها در قسمت چپ صفحه می تواند باعث ایجاد آشفتگی گردد . بعلاوه خیلی از صفحات شامل تعداد زیادی تصویر می باشد که به جای ایجاد شفافیت سردرگمی ایجاد می کند .

3- وارد سایت http://www.yankees.com/ شوید و در آن سایت پیمایش کنید و سعی کنید که مناطق ویژه مورد علاقه را پیدا کنید .
سایت Yankee بهترین مثال از یک سایت گیرا می باشد . اتصالات Navigation در بالای صفحه و بصورت واضح جایگیری شده است و کاربران فرصت پیمودن را با انتخاب موارد Navigation دارند . اتصال به سایتهای وابسته بوسیله تصاویر سمت چپ امکانپذیر است . این سایت همچنین دارای امکانات Flash برای مرورگرهایی که از آنها حمایت می کنند نیز هست و نیز این سایت تجهیزات لازم برای کاربرانی که Plugins ندارند را مهیا می کند .





Navigation مفاهیم
اهداف :

1- توصیف اهمیت Navigation
2- شرح اینکه چگونه مرورگر Navigation را کنترل می کند .
3- توصیف ساختار سایت
4- تعریف قراردادهای مشابه
5- جستجوو کاوش برای یک طرح Navigation

سئوالات قبل از شروع فصل :

1- چرا یک طراح وب باید در سایت Navigation اضافه کند؟
2- هدف از نوار ابزار در مرورگر چیست ؟
3- هدف از نقشه سایت چیست ؟
4- URL مخفف چه کلماتی است ؟

مقدمه :

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

مهم است 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 به طور عادی به 2 نوع مقدماتی و ثانویه رده بندی شده است . Navigation مقدماتی شامل المانهای Navigationاست که در بیشتر مکانهای سایت در دسترس هستند.
المانهای Navigation ثانوی : که به کاربر اجازه می دهد تا در مکانهای ویژه گردش کنند .
برای مثال خیلی از سایتها صفحاتی دارند که اطلاعاتی در مورد یک شرکت راارائه می دهند .
این Navigation های نوع دوم ممکن است اتصال درباره ما ( About Us) باشد . هنگامی که کاربر به صفحه About us ( درباره ما ) می رسد ممکن است در اینجا اتصال دیگری وجود داشته باشد . برای مثال ممکن است در آنجا اتصال برای اطلاعات سرمایه گذاری ، مکانهای دیگر و مطبوعات آزاد و ... باشد . این اتصالات جزء المانهای Navigation ثانوی هستند . زیرا آنها مربوط به صفحه درباره ما ( About Us ) هستند نه مربوط به صفحات دیگر سایت و بنابراین این اتصالات نمی توانند در نواحی دیگر سایت پیدا شوند .

سلسله مراتب Navigation :

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

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

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

آگاهی از موقعیت :

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

عنوان - سر فصل

عنوان هر صفحه ایجاد وسیله مؤثر برای دانستن و تعیین موقعیت جایی که در آن قرار دارند . محدودیت استفاده از این روش برای آگاه شدن از موقعیت در این است که در این روش فقط موقعیت مکان جاری نشان داده می شود و موقعیت های وابسته (نظیر صفحات بچه ) طبق مثال قبل را نشان نمی دهند .

رنگها :

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

تصاویر :

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

Cooki :

علائمی مثل خطوط اشاره بر مسیر (Navigation ) می توانند شما را در رسیدن به موقعیت جاری کمک کنند که این علامت برای حرکت کاربران در صفحات چند گانه مفید است .

نقشه سایت :

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

عمل Navigation ، نمادهای تصویری و نظارتها
سه کلیک برای مدیریت کاربران برای دسترسی به فایلها را به خاطر آورید . کاربران نباید در موقع گردش در سایت برای پیدا کردن اطلاعات درخواستی و سایتها بیشتر از 3 بار بر روی اتصالات کلیک کنند .
این خطوط راهنما برای آگاهی وجستجو در سایتهای وب بسیار مهم است . مسیرهای لنگری مجهول کاربران را دچار سردرگمی کرده و آنها را از بازگشت به سایت نا امیدمی کنند . در نظر بگیرید که آیا چند رسانه ای ها قالبهایی جهت مسیریابی ایجاد می کنند و یا صرفا اضافی می باشند . به عنوان مثال اگر در سایت خود از Navigation Flash استفاده کنید ، برای مرورگرهایی که از Flash حمایت نمی کنند مشکل ایجاد می کنید . یک حس و دیدخوب جهت یابی برای کاربران خیلی مهم است . نوار ابزار Navigation باید خیلی ساده و روشن باشد و به درستی درک شود .
آیکونها خیلی عمومی و عامه پسند هستند و بیشتر مردم به آنها آشنا هستند . آیکونها 2 نوع دارند :
برچسب دار ، بدون بر چسب ؛
اگر لازم باشد که کاربران حدس بزنند که آیکون آنها را به کجا هدایت می کند این آیکون باید برچسب داشته باشند .
- بقیه اجزاء متداول Navigation به قرار زیر است : 1- کلیدها
2- نقشه های تصویری و نقاط اشاره گر ماوس
3- بردارها
4- جداول
5- جداول Navigation و منوها
6- منو باز شونده