آموزش-خطاهای بزرگ طراحی وب

این مطلب بخشی از مقاله ۱۰ اشتباه برتر طراحی وب نوشته دکتر جاکوب نیسلون است.
۱- نامناسب بودن امکان جست‌وجو:
چه وقت به سراغ بخش جست‌وجوی سایت‌ها می‌روید؟ حتما زمانی که نتوانید به راحتی اطلاعات مورد نظرتان را پیدا کنید. کاربران هم از همین روش استفاده می‌کنند و هنگامی به سراغ بخش جستجوی سایت شما می‌روند که نتوانند از طریق راهنمای صفحه به اطلاعاتی که می‌خواهند دست پیدا کنند.
۲- خوانندگان وب و فایل‌های pdf
خوانندگان وب از فایل‌های pdf دل خوشی ندارند. تصور کنید به‌ سختی مشغول جست‌وجو و گشت زدن در وب هستید که ناگهان به یک فایل pdf می‌رسید و فاجعه رخ می‌دهد؛ فشردگی خطوط، مشکلات نرم‌افزاری، از دست دادن فرصت جست‌وجو و گم کردن مسیر جستجو از مواردی است که فایل‌ PDF را کابوس خوانندگان وب می‌کند.
پس این شعار را فراموش نکنید: خداحافظ حروف و صفحه‌های چاپی و سلام فونت‌های لاغر و ریز.
۳- تغییر نکردن رنگ لینک‌های دیده شده
برای کاربران آنلاین همیشه مهم است که چه لینکی را دیده‌اند؟ چه لینکی را می‌بیینند؟ و چه لینکی را می‌توانند ببینند.
لینک‌ها کلید اساسی راهنمایی فرد به مطلب مورد نظرش است. پس خیلی مهم است که تفاوت رنگ بین لینک‌های دیده شده و دیده نشده وجود داشته باشد.
فراموش نکنید آن‌ها انتظار دارند بدانند وقتی روی بخشی که لینک شده کلیک کردند به کجا می‌رود و چه مطلب و یا بخشی را می‌بینند.
دنیای www
4- متن‌هایی که قابل اسکن چشمی نباشند(درک شوندگی‌ در یک نگاه)
دیواری از تکست مقابل چشمان خسته کاربر وب، تزریق تجربه مرگ‌آوری به دنیای تعاملی اینترنت است. بهتر است بدانید که چگونه برای وب بنویسید.
نوشتن برای وب و نوشتن برای رسانه‌های چاپی کاملا متفاوت است:
میان‌تیترها، بولت‌ها، کلید‌واژه‌های برجسته، پاراگراف‌های کوتاه، هرم وارونه، ساده نویسی و بی طمطراق و بدون بازاریابی نوشتن از نکاتی هستند که شما باید برای وب‌نویسی در نظر داشته باشید.[الگوی خواندن صفحات وب این است: F]
5- استفاده از فونت‌های ثابت
مشکل بیشتر وب سایت‌ها وجود فونت‌های ثابت است. فونت‌هایی لاغر و ریز که برای خیلی‌ها خوانا نیستند. آمار نشان می‌دهد که تا سال ۲۰۰۴ حدود ۹ میلیون نفر با سن بالای ۶۵ سال از اینترنت استفاده می‌کردند. پس چطور ‌می‌توانند فونت‌های ریز شما صفحه شما را بخوانند؟
۶- عنوان صفحه
کاربران جدید بیشتر از طریق جست‌وجو در موتوهای جست‌وجو به سایت شما می‌رسند. عنوان صفحه که با تگ همراه هستند معمولا در نتایج صفحات جست‌وجو (SERP) قابل کیلک هستند. این موتوها معمولا تا ۶۶ کارکتر اول عنوان صفحه را نشان می‌دهند.<br /> فراموش نکنید که این عنوان صفحه است که در لیست سایت‌های محبوب کاربر(Favorites) ذخیره می‌شود. درضمن هیچگاه عنوان صفحه را با کلماتی مثل (the) یا (welcome to) شروع نکنید. این کار باعث می‌شود عنوان سایت شما به ناچار در زیر کلمات T و W در Favorites ذخیره شود.<br /> عنوان سایت باید دقیقا با کلماتی شروع شود که هدف اصلی وب سایت شماست. کلماتی که کاربران در هنگام جست‌وجو از آن استفاده می‌کنند.<br /> از طرف دیگر به کاربرانی فکر کنید که حرفه‌ای هستند و با چند پنجره مختلف کار می‌کنند. بنابراین سعی کنید که با کوتاه‌ترین کلمات عنوان سایت خودتان را نشان دهید تا در میان انبوه پنجره‌های کاربر راحت‌تر دیده شود.<br /> خطاهای بزرگ طراحی وب<br /> ۷- هر چیزی که شکل تبلیغات باشد<br /> درنظر داشته باشید که کاربران وب معمولا هر چیزی که شکل تبلیغ دارد، رد می‌کنند و وقتی که کاربر پنجره‌ای را به این دلیل بست دیگر به جزییات آن پنجره فکر نمی‌کند.<br /> بنابراین بهترین راه این است که از طراحی‌هایی که به شکل تبلیغات عرضه می‌شوند، دوری کنید.<br /> دلایل محکمی برای این نظر وجود دارد:<br /> • banner blindness: این بدان معناست که کاربران هرگز مسیر نگاهشان را بروی آگهی‌ها و یا حتی هر چیزی که شکل آن‌ها باشد نگه نمی‌دارند.<br /> • animation avoidance: کاربران از هربخش چشمک زن و یا متن‌های فلش براحتی می‌گذرند<br /> • pop-up purges: کاربران قبل از باز شدن کامل هر پنجره pop-up آن را می بندند. تازه اگر pop-up blocker نداشته باشند.<br /> ۸- حمله به طراحی پایدار<br /> پایداری طراحی بزرگترین اصل در کاربردپذیری صفحات وب است. هنگامی که کاربران سایت شما از پایداری طراحی شما مطمئن باشند دیگر نگران این نیستند که چه اتفاقی در آینده می افتند چون آن‌ها می دانند چطور تجربه‌های جدید بروی وب سایت شما شکل می‌گیرد.<br /> ۹- باز شدن پنجره جدید<br /> بازشدن پنجره جدید مثل کثیف کردن نمایشگر کاربر است. منصفانه نیست وقتی که طراحان از این روش برای حفظ کاربر بروی وب سایت خودشان استفاده می‌کنند.<br /> شکست را قبول کنید و به جای این کار اجازه دهید اگر بروی لینک شما کلیک شد و چیز بدرد بخوری نداشتید بتوان با زدن دکمه برگشت به مسیر قبلی جست‌وجو برگشت. کاربران اصلا از این روش استقبال نمی‌کنند به خصوص اگر از نمایشگر‌های کوچک استفاده کنند بعد از چند کلیک بروی لینک‌های سایت شما دیگر نمی‌توانند به صفحه‌ای که از اول کلیک کرده بودند برگردند.<br /> لینک‌ها باید درست در همان صفحه باز شوند. اگر فردی خواست که لینکی را در صفحه جدیدی ببیند می‌تواند از دستور open in new window در مرورگر خودش استفاده کند.<br /> ۱۰- جواب ندادن به سوال کاربر<br /> هدف نهایی همه وب سایت ها کاربران هستند. آن‌ها برای دیدن وب سایت شما دلیل دارند. اما تعداد بی شماری از وب سایت‌ها به خوبی پاسخ کاربران خود را نمی‌دهند.<br /> خیلی وقت‌ها جواب بسیار ساده است اما کاربر آن را پیدا نمی‌کند چون شما به درستی آن را عرضه نکردید. گاهی توضیحات خسته کننده و زیاد شما درباره محصولات، آن‌ها را از هدفشان دور می‌کند. آن‌ها خیلی وقت ندارند که بتوانند همه چیز را بخوانند.<br /> منبع: همشهری آنلاین</p> <!--<a href="javascript:window.print()"><img src="http://dadegostaran.com/wp-content/themes/test/i/print.gif" /></a>--> </div> </div> <!--/ post template --> <!-- comments template --> <!-- You can start editing here. --> <!-- If comments are open, but there are no comments. --> <h3 id="respond">نظر بگذاريد</h3> <form action="http://dadegostaran.com/wp-comments-post.php" method="post" id="commentform"> <p><label for="author">نام(<b style='color:red'>*</b>) </label><input type="text" name="author" id="author" value="" size="22" tabindex="1" /> </p> <p><label for="email">ايميل (منتشر نخواهد شد)(<b style='color:red'>*</b>)</label><input type="text" name="email" id="email" value="" size="22" tabindex="2" /> </p> <p><label for="url">وب سايت</label><input type="text" name="url" id="url" value="" size="22" tabindex="3" /> </p> <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="ثبت نظر" /> <input type="hidden" name="comment_post_ID" value="2345" /> </p> </form> <!--/ comnets template --> </div> </div> </div><!-- content --> </div> <div id="sidebars" > <div id="r-sidebar"> <div class="menu_box widget_search" id="widget_search" ><form method="get" id="searchform" action="http://dadegostaran.com/"><input type="submit" id="searchsubmit" value="جستجو" /> <input type="text" value="" name="s" id="s" /> </form></div> <div class="menu_box widget_code" id="widget_code" > <div class="textwidget"><ul><h2>برگه ها</h2><li class="page_item page-item-3"><a href="http://dadegostaran.com" title="صفحه‌ی نخست">صفحه‌ی نخست</a></li> <li class="page_item page-item-2"><a href="http://dadegostaran.com/top/about-us" title="درباره ما">درباره ما</a></li> <li class="page_item page-item-44"><a href="http://dadegostaran.com/top/projects" title="نمونه پروژه ها">نمونه پروژه ها</a></li> <li class="page_item page-item-22"><a href="http://dadegostaran.com/top/services" title="خدمات">خدمات</a> <ul> <li class="page_item page-item-242"><a href="http://dadegostaran.com/top/services/camera" title="سیستم های حفاظتی و نظارتی">سیستم های حفاظتی و نظارتی</a></li> <li class="page_item page-item-236"><a href="http://dadegostaran.com/top/services/webdesign" title="طراحی وب">طراحی وب</a></li> <li class="page_item page-item-218"><a href="http://dadegostaran.com/top/services/software" title="نرم افزار">نرم افزار</a></li> <li class="page_item page-item-239"><a href="http://dadegostaran.com/top/services/multi" title="مالتی مدیا">مالتی مدیا</a></li> <li class="page_item page-item-233"><a href="http://dadegostaran.com/top/services/network" title="شبکه">شبکه</a></li> </ul> </li> <li class="page_item page-item-16"><a href="http://dadegostaran.com/top/products" title="محصولات">محصولات</a> <ul> <li class="page_item page-item-417"><a href="http://dadegostaran.com/top/products/crm" title="سیستم مدیریت ارتباط با مشتری">سیستم مدیریت ارتباط با مشتری</a></li> <li class="page_item page-item-414"><a href="http://dadegostaran.com/top/products/school-onlin" title="نرم افزار تحت وب مدارس( نرم افزار جامع مدارس)">نرم افزار تحت وب مدارس( نرم افزار جامع مدارس)</a></li> <li class="page_item page-item-424"><a href="http://dadegostaran.com/top/products/packages" title="پکیج ها">پکیج ها</a></li> </ul> </li> <li class="page_item page-item-2582"><a href="http://dadegostaran.com/top/sitemap" title="نقشه سایت">نقشه سایت</a></li> <li class="page_item page-item-38"><a href="http://dadegostaran.com/top/contact-us" title="تماس با ما">تماس با ما</a></li> <li class="page_item page-item-1224"><a href="http://dadegostaran.com/elearning" title="آموزش">آموزش</a></li> <li class="page_item page-item-2819"><a href="http://dadegostaran.com/forum" title="انجمن ها">انجمن ها</a></li> <li class="page_item page-item-330"><a href="http://dadegostaran.com/consultancy" title="مشاوره">مشاوره</a></li> <li class="page_item page-item-310"><a href="http://dadegostaran.com/articles" title="مقالات تخصصی نرم افزار و IT">مقالات تخصصی نرم افزار و IT</a></li> <li class="page_item page-item-355"><a href="http://dadegostaran.com/graphic-templates" title="قالب های گرافیکی">قالب های گرافیکی</a></li> <li class="page_item page-item-1239"><a href="http://dadegostaran.com/image-gallery" title="گالری تصاویر">گالری تصاویر</a></li> <li class="page_item page-item-359"><a href="http://dadegostaran.com/our-contract" title="شرایط قرارداد ها">شرایط قرارداد ها</a></li> <li class="page_item page-item-434"><a href="http://dadegostaran.com/adver" title="تبلیغات ما">تبلیغات ما</a></li> <li class="page_item page-item-333"><a href="http://dadegostaran.com/honor" title="افتخارات">افتخارات</a></li> <li class="page_item page-item-408"><a href="http://dadegostaran.com/faq" title="سولات متداول">سولات متداول</a></li> <li class="page_item page-item-337"><a href="http://dadegostaran.com/download" title="دانلود ها">دانلود ها</a></li> <li class="page_item page-item-740"><a href="http://dadegostaran.com/useful-links" title="لینک های مفید">لینک های مفید</a></li> <li class="page_item page-item-1061"><a href="http://dadegostaran.com/link-exchange" title="تبادل لینک">تبادل لینک</a></li> </ul></div> </div> <div class="menu_box widget_text" id="widget_text" > <h2><span> </span>فروشگاه آنلاین</h2> <div class="textwidget"><a href="http://dadegostaran.com/top/products/packages"><img src="http://dadegostaran.com/wp-content/uploads/2009/02/online-sales.jpg" alt="advertizments" width="177" height="50" border="0"" title="advertizments" size-full wp-image-275 /></a></div> </div> <div class="menu_box widget_code" id="widget_code" > <h2><span> </span>خريد آنلاين</h2> <div class="textwidget"><ul><li class="page_item page-item-437"><a href="http://dadegostaran.com/products-page/checkout" title="تائید سفارشات">تائید سفارشات</a></li> <li class="page_item page-item-439"><a href="http://dadegostaran.com/products-page/your-account" title="حساب شما">حساب شما</a></li> <li class="page_item page-item-438"><a href="http://dadegostaran.com/products-page/transaction-results" title="نتیجه تراکنش">نتیجه تراکنش</a></li> </ul></div> </div><div class="menu_box widget_categories" id="widget_categories" ><h2><span> </span>دسته‌ها</h2> <ul> <li class="cat-item cat-item-502"><a href="http://dadegostaran.com/c/elearning" title="نمایش ‌همه‌یی نوشته‌ها درباره موضوع آموزش">آموزش</a> </li> <li class="cat-item cat-item-24"><a href="http://dadegostaran.com/c/news" title="نمایش ‌همه‌یی نوشته‌ها درباره موضوع اخبار">اخبار</a> </li> <li class="cat-item cat-item-21"><a href="http://dadegostaran.com/c/announcements" title="نمایش ‌همه‌یی نوشته‌ها درباره موضوع اطلاعيه ها">اطلاعيه ها</a> </li> <li class="cat-item cat-item-1"><a href="http://dadegostaran.com/c/uncategorized" title="نمایش ‌همه‌یی نوشته‌ها درباره موضوع دسته‌بندي نشده">دسته‌بندي نشده</a> </li> <li class="cat-item cat-item-25"><a href="http://dadegostaran.com/c/articels" title="نمایش ‌همه‌یی نوشته‌ها درباره موضوع مقالات">مقالات</a> </li> <li class="cat-item cat-item-11"><a href="http://dadegostaran.com/c/projects" title="نمایش ‌همه‌یی نوشته‌ها درباره موضوع نمونه پروژه ها">نمونه پروژه ها</a> </li> </ul> </div> <div class="menu_box widget_code" id="widget_code" > <div class="textwidget"><h2>پيوندها</h2> <ul class='xoxo blogroll'> <li><a href="http://www.shci.ir/" title="شوراي عالي انفورماتيک" target="_blank">شوراي عالي انفورماتيک</a></li> <li><a href="http://www.ict.gov.ir/" title="وزارت ارتباطات وفناوري اطلاعات" target="_blank">وزارت ارتباطات وفناوري اطلاعات</a></li> <li><a href="http://www.microsoft.com" target="_blank">سایت شرکت ماکروسافت</a></li> <li><a href="http://www.apple.com" target="_blank">سایت شرکت اپل</a></li> </ul> </div> </div> <div class="menu_box widget_text" id="widget_text" > <h2><span> </span>پشتيباني</h2> <div class="textwidget"><a href="http://dadegostaran.com/faq"><img src="http://dadegostaran.com/wp-content/uploads/2009/02/support.jpg" alt="support" width="177" height="50" border="0"" title="advertizments" size-full wp-image-275 /></a></div> </div> <div class="menu_box widget_text" id="widget_text" > <h2><span> </span>خوراک خوان خبري </h2> <div class="textwidget"><ul><li><a href="http://dadegostaran.com/feed">پيگيري نوشته‌ها با RSS </a></li> <li><a href="http://dadegostaran.com/comments/feed">پيگيري ديدگاه‌ها با RSS </a></li> </ul></div> </div><div class="menu_box widget_archive" id="widget_archive" ><h2><span> </span>آرشيو مطالب</h2> <ul> <li><a href='http://dadegostaran.com/2011/11' title='نوامبر 2011'>نوامبر 2011</a></li> <li><a href='http://dadegostaran.com/2011/09' title='سپتامبر 2011'>سپتامبر 2011</a></li> <li><a href='http://dadegostaran.com/2011/08' title='آگوست 2011'>آگوست 2011</a></li> <li><a href='http://dadegostaran.com/2011/07' title='جولای 2011'>جولای 2011</a></li> <li><a href='http://dadegostaran.com/2011/06' title='ژوئن 2011'>ژوئن 2011</a></li> <li><a href='http://dadegostaran.com/2009/10' title='اکتبر 2009'>اکتبر 2009</a></li> <li><a href='http://dadegostaran.com/2009/09' title='سپتامبر 2009'>سپتامبر 2009</a></li> <li><a href='http://dadegostaran.com/2009/08' title='آگوست 2009'>آگوست 2009</a></li> <li><a href='http://dadegostaran.com/2009/07' title='جولای 2009'>جولای 2009</a></li> <li><a href='http://dadegostaran.com/2009/06' title='ژوئن 2009'>ژوئن 2009</a></li> <li><a href='http://dadegostaran.com/2009/05' title='می 2009'>می 2009</a></li> <li><a href='http://dadegostaran.com/2009/04' title='آوریل 2009'>آوریل 2009</a></li> <li><a href='http://dadegostaran.com/2009/03' title='مارس 2009'>مارس 2009</a></li> <li><a href='http://dadegostaran.com/2009/02' title='فوریه 2009'>فوریه 2009</a></li> <li><a href='http://dadegostaran.com/2009/01' title='ژانویه 2009'>ژانویه 2009</a></li> </ul> </div> </div><!-- end #r-sidebar --> </div><!-- end #sidebars --> </div> <div id="footer">ِDesigned And Developed By <a href="http://dadegostaran.com">DadeGostaran Iranian Eng</a> | All Rights Reserved. <a href="http://dadegostaran.com/"></a></div> </div> </div><!-- end #wrapper --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-7161730-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html>