Transcript تهیه کننده : مهندس نسترن تشکر کارشناس ارشد فناوری اطالعات استاد راهنما : جناب آقای دکتر درهمی 1 فهرست  مواردکلی ارائه  چینش صفحه  لینک ها

‫تهیه کننده‪ :‬مهندس نسترن تشکر کارشناس ارشد فناوری اطالعات‬
‫استاد راهنما‪ :‬جناب آقای دکتر درهمی‬
‫‪1‬‬
‫فهرست‬
‫‪ ‬مواردکلی ارائه‬
‫‪ ‬چینش صفحه‬
‫‪ ‬لینک ها‬
‫‪ ‬گرافیک‬
‫‪ ‬محتوا‬
‫‪ ‬زبان‬
‫‪ ‬دسترس ی ها‬
‫‪ ‬مواردی که باید حذر کرد‬
‫‪ ‬امنیت و حفاظت از اطالعات و تشخیص هویت‬
‫‪2‬‬
‫مواردکلی ارائه‬
‫‪ ‬نظر در اولین بازدید حرفه ای باشد‬
‫‪ ‬هدف سایت به راحتی در صفحه اول مشخص باشد‪( .‬حتی میتوان از یک جمله به‬
‫(‪)First impression is professional‬‬
‫صورت ‪ TagLine‬برای درک هدف سایت استفاده کرد‪).‬‬
‫‪3‬‬
‫‪ ‬همیشه راهنما وجود داشته باشد‬
‫‪ ‬پیگیری های آنالین‬
‫‪ ‬شفافیت‪ ،‬تعاملی بودن‪ ،‬پروسه سفارش آسان‬
‫‪ ‬روش های مختلف پرداخت و سفارش‬
‫‪ ‬وضعیت فرم ثبت شده مشخص باشد (رد شده یا قبول است) تا کاربر‬
‫سردرگم نتیجه نباشد‪.‬‬
‫‪ ‬سواالت اضافی برای جمع آوری اطالعات از کاربران پرسیده نشود‪.‬‬
‫‪ ‬جواب سریع به ایمیل ها‬
‫‪4‬‬
‫‪ ‬ساختار و ناوبری (‪ )Navigation‬مناسب‬
‫‪5‬‬
‫مثال می توان برای هر صفحه کد رنگ مشخص ی داشت و با به شکلی‬
‫مثل این ‪ box‬مشخص کرد که در کجا قرار دارد‪.‬‬
‫‪6‬‬
‫• الیه های پایدار (مردم از تکرار الیه ها می آموزند)‬
‫• ویژگی های عناصر (قالب ها و رنگ ها و شکل لینک ها و‪..‬‬
‫مکان و سایز تصاویر‪title ،‬‬
‫‪ bar‬ها و مکان فیلد های‬
‫جستجو و ‪ ...‬ثابت است‬
‫‪7‬‬
‫‪ ‬فقط متن (‪ )Text only‬در مواردی که سرعت اینترنت کم است هم بتوان از‬
‫سایت استفاده کرد‪.‬‬
‫و یا شبیه کاری که ‪ Gmail‬هم میکند ‪basic HTML view‬‬
‫‪8‬‬
‫چینش صفحه‬
‫‪ bold ‬کردن مطالب مهم‬
‫‪ ‬تضاد برای دید بهتر (متن تیره در زمینه روشن)‬
‫‪ ‬فاصله های خالی مناسب برای جلوگیری از درهم برهم بودن و بازبینی سریع (‬
‫‪)quick scan‬‬
‫‪ ‬استفاده مناسب و ثابت از رنگها (به طوری که رنگ های مختلف مفاهیم‬
‫مختلفی تداعی کنند)‬
‫‪ ‬استفاده از یک فونت ثابت‬
‫‪ ‬مشخص بودن لینک ها با رنگ یا ‪ underlined‬مناسب‬
‫‪9‬‬
‫‪ ‬مطالب مهم ‪bold‬شده است‪ ،‬به مقدار کافی فضای خالی برای جلوگیری از درهم و برهم شدن وجود دارد‪،‬‬
‫رنگ ها وفونت ها ثابت است‪ ،‬رنگ ها طوری است که به آسانی قابل دیدن است‪ .‬لینک ها نیز مشخص‬
‫است‪.‬‬
‫‪10‬‬
‫لینک ها‬
‫‪ ‬لینکی بین موارد مرتبط باشد‬
‫‪ ‬لینکی خراب نباشد‬
‫‪ ‬لینک ها به خوبی مشخص باشند‪ .‬با رنگ یا ‪underline‬‬
‫‪ ‬لینک ها دارای عنوان های مناسب باشد که مشخص کننده صفحات آن باشد‪ .‬این عناوین‬
‫کوتاه باشد و حداالمکان در یک سطر جا شوند‪.‬‬
‫‪ ‬لینک هایی ناوبری (مثل نقشه سایت‪ ،‬صفحه اصلی و ‪ )...‬در همه صفحات سایت باشد‪.‬‬
‫‪ ‬تمایز بین لینک به صفحات داخلی و سایت های دیگر‬
‫‪11‬‬
‫‪( History trails ‬لینک های بازدید شده رنگ متفاوتی پیدا کنند)‬
‫‪ ‬ماکزیمم کلیک برای برای رسیدن به هدف ‪ 3‬تا بیشتر نباشد‬
‫‪ ‬الیه های ثابت برای لینک ها نیز رعایت شود (برای مثال جای لینک نقشه‬
‫سایت در همه صفحتا ثابت باشد)‬
‫‪ ‬تعداد مناسب لینک ها‬
‫‪12‬‬
‫گرافیک‬
‫‪ ‬در صفحات دارای ‪ transaction‬باال‪ ،‬تصاویر کمی باشد‬
‫‪ ‬عناصر گرافیکی به تعداد کافی باشد نه زیاد نه کم‬
‫‪ ‬سایز و کیفیت مناسب تصاویر‪ ،‬برای لود سریع مشکلی پیش نیاورد‬
‫‪ ‬تصاویر اصلی مخصوصا بنز اصلی با طرحی مشخص و مرتبط طراحی شده‬
‫باشد‪.‬‬
‫‪13‬‬
‫‪ ‬درک مفهوم آیکن ها آسان باشد‬
‫درک این تصاویر بدون نوشته جلوی آن ها‬
‫سخت بود‪.‬‬
‫‪14‬‬
‫به آسانی‬
‫مفهوم را‬
‫میرساند‬
‫محتوا‬
‫‪ ‬وجود اسم و آدرس مکان فیزیکی‬
‫‪ ‬تلفن و ایمیل‬
‫‪ ‬شخص ی سازی برای کاربران‬
‫‪ ‬موقعی که به کاربر فیدبک داده میشود‪ ،‬مشخص شود که جزییات اطالعات‬
‫را چگونه دریافت کند‪ ،‬آنالین یا آفالین‬
‫‪ ‬محتوا چنان دسته بندی شده باشد تا کاربران به راحتی آنچه دنبالش هستند را بیابند‬
‫‪15‬‬
‫‪ ‬دسته بندی خدمات یا محصوالت‬
‫دسته بندی نشدن خدمات و محصوالت باعث درهم ریختگی و‬
‫نامفهمومی سایت شده است‬
‫‪16‬‬
‫‪ ‬سواالت متدوال (‪)FAQ‬‬
‫‪ ‬اخطار های درست و کامل داده شود (مثال فقط گفته نشود اطالعات کافی نیست‪،‬‬
‫مشخص شود کجا)‬
‫‪ ‬توضیح در مورد نحوه تحویل محصول یا خدمات‬
‫‪ ‬تخصیص جایزه یا هدیه ای برای مشتریان‬
‫‪ ‬دادن فیدبک یه کاربران‬
‫‪17‬‬
‫‪ ‬اطالعات به روز‪ ،‬جاری و مربوط باشد‬
‫‪18‬‬
‫زبان‬
‫‪ ‬استفاده از لغات مناسب (نه خیلی سخت نه پیش پا افتاده)‬
‫‪ ‬چند زبانه بودن‬
‫‪ ‬دقت (برای مثال نداشتن غلط تایپی یا امالیی)‬
‫‪19‬‬
‫مواردی که باید حذر کرد‬
‫‪ ‬تعداد تبلیغات زیاد‬
‫‪ ‬استفاده از رنگ هایی نزدیک هم که تشخیص تفاوت آنها مشکل باشد‬
‫‪ ‬فونت خیلی ریز یا خیلی درشت‬
‫‪ ‬ایتالیک بودن‬
‫‪ ‬همه جمله را با حروف ‪capitals‬‬
‫‪20‬‬
‫مواردی که باید حذر کرد‬
‫‪ ‬استفاده از فلش یا حرکت در صفحه هایی که خواندن الزم است‬
‫‪ ‬پشت زمینه هایی که باعت ناخوانایی متن یا تمرکز زدایی شود‬
‫‪ ‬لینکی به ‪ Page‬های در دست طراحی و کامل نشده‬
‫‪ ‬انیمیشن های متحرک به جز برای سایت های خاص‬
‫‪ ‬پنجره های ‪Pop up‬‬
‫‪21‬‬
‫مواردی که باید حذر کرد‬
‫‪ scroll ‬عمودی زیادی‬
‫کاربران با دیدن آیکن ها و لینک ها‬
‫به ‪ scroll‬توجهی نمی کنند و‬
‫قسمت زیادی از اطالعات پایین تر را‬
‫از دست میدهند‪.‬‬
‫‪ Scroll ‬افقی‬
‫‪22‬‬
‫امنیت و حفاظت از اطالعات و تشخیص هویت‬
‫‪ ‬اطمینان از امنیت کافی (هک نشود)‬
‫‪ ‬اطمینان از محرمانه بودن اطالعات شخص ی‬
‫‪ ‬تشخیص هویت‬
‫‪ ‬برگشت آسان پول در موارد خاص‬
‫‪ ‬پرداخت امن‬
‫‪23‬‬
‫دسترس ی ها‬
‫‪ ‬اسم دامین آشنا باشد و به یاد کاربران بماند‬
‫‪ ‬طراحی برای افراد ناتوان نیز مناسب باشد (مثال سایز و فونت بزرگتر نیز داشته باشد)‬
‫‪ ‬سرعت لود باال که البته به سرور نیز بستگی دارد‪.‬‬
‫‪ ‬در مرورگرهای مختلف درست کار کند و نیز به هم نریزد‪.‬‬
‫‪ ‬در همه نوع رزولوشن طراحی به هم نریزد‪.‬‬
‫‪24‬‬
‫آمار سال ‪2009‬‬
:‫ منبع‬
 The U.S. Department of Health and Human Services, (2009). Research-
Based Web Design & Usability Guidelines , >http://www.usability.gov/<.
25