راهنمایی هایی برای طراحی سایت استثنایی، کاربردی و کاربر پسند

رتبه بندی کاربر: 4 / 5

PLG_VOTE_STAR_ACTIVEPLG_VOTE_STAR_ACTIVEPLG_VOTE_STAR_ACTIVEPLG_VOTE_STAR_ACTIVEPLG_VOTE_STAR_INACTIVE

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

  • سادگی

درسته که ظاهر سایت مهمه ولی مردم که نمیان به سایت شما نمره بدن. اونا میان که یه کاری انجام بدن، یا یه سری اطلاعات گیر بیارن.
گذاشتن پلاگین ها و اجزای بی فایده که فقط برای قشنگی هستن و کاربردی ندارن تو سایتتون باعث میشه کاربرا نتونن راحت به هدفشون برسن.
پس سادگی سایت باعث کارایی و کاربرپسند شدن سایت میشه. حالا برای اینکه سایت ساده ای داشته باشید براتون چند تا مثال می زنم:

  • حداکثر از 5 رنگ برای طراحی سایت استفاده کنید نه بیشتر.
  • اندازه فونت ها باید قابل خوندن باشه و حداکثر از 3 رنگ در نوشته ها استفاده کنید.
  • فقط زمانی از گرافیک استفاده کنید که برای کاربر ضروریه و فقط برای قشنگی نباشه.

این سایت یه مثال عالی برای سادگی: Rockaway Relief

  • نظم بصری

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

  • استفاده از رهیاب (navigation)

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

  • ساختار فهرست اصلی رو ساده نگهدارید. جاشم که می دونید باید بالای صفحه باشه.
  • فهرست اصلی رو پایین صفحه ( که بهش می گن پاصفحه) هم بذارید.
  • در همه صفحات، به جز صفحه اول، برد کرامب یا Breadcrumbs استفاده کنید تا کاربرها بدونن دقیقا کجا هستن.

  • بالای سایتتون یه افزونه جستجو بذارید تا بازدید کننده ها بتونن کلمات کلیدی رو سرچ کنن.
  • یک صفحه رو پر از گزینه های رهیاب نکنید.
  • دیگه بیشتر از سه سطح نرید. مثلا عکس بالا که برد کرامبز رو نشون داده، 3 سطح داره. سطح اول صفحه اصلی، سطح دوم سیاست، سطح سوم افغانستان.
  • بین متن ها به مطالب دیگه لینک بدید و واضح توضیح بدید که این پیوندها به کجا میرن.

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

  • ثبات

علاوه بر اینکه باید رهیاب سایت رو ثابت نگه دارید، حس و حال کلی سایت هم باید در همه صفحات یکسان باشه. اگر پس زمینه، رنگ های اصلی به کار رفته، و فونت و اندازه نوشته ها تو همه صفحات ثبات داشته باشه تأثیر مثبتی روی کارایی و کاربر پسند بودن سایتتون میذاره.
البته منظورم این نیست که همه صفحات سایت باید دقیقا طراحی یکسانی داشته باشن. اتفاقا باید برای هر مدل صفحه یک طرح خاص و متفاوت داشته باشید. مثلا طراحی صفحه ثبت نام با طراحی یک پست عادی متفاوته. اما فرض کنید هر پست تو صفحه ای با یک طراحی متفاوت باشه! چه حسی به خواننده دست میده؟

  • در دسترس بودن

استفاده از اینترنت تبلت ها از سال 92 تا 94 به اندازه 30 درصد بیشتر شده. استفاده از اینترنت تلفن های هوشمند هم تو همین بازه زمانی 78 درصد رشد داشته. پس اگه می خواید واقعا کاربرپسند باشید باید طراحی سایتتون با وسایل مختلفی که کاربراتون استفاده می کنن سازگاری داشته باشه.
درست متوجه شدید. منظورم همون طراحی کنشی یا ریسپانسیو هست. اگه یه قالب کنشی داشته باشید به طور خودکار با سایز صفحه نمایش هر وسیله ای هماهنگ میشه.
از طرفی، ایجاد سایت با طراحی کنشی به سادگی اضافه کردن متن جایگزین برای عکس هاست (تا هر وقت عکس ها در مرورگر کاربر باز نشد حداقل بتونه متن رو بخونه و بفهمه عکس در مورد چی هست)
مسئله بعدی برای در دسترس بودن سایتتون اینه که با سیستم عامل های مختلف درست کار کنه و کاربرا رو واقعا راضی نگه داره. یعنبهتره به مدل های وابسته به سیستم عامل PSM یا Platform Specific Model بچسبید به جای اینکه از اجزای خاص و جدیدی استفاده کنید که کاربرای سیستم عامل ها شاید کار کردن باهاشو بلد نباشن.

  • مطابق بودن با سنت ها

برای طراحی سایت یکسری سنت هایی هستند که، در طول زمان، کاربرای اینترنت بهشون عادت کردن. مثلا:

  • منوی اصلی بالای سایت باشه. (البته تو سایت های فارسی سمت راست، و تو سایت های انگلیسی سمت چپ هم میشه)
  • بالا و سمت راست یا وسط صفحه لوگو باشه (برای سایت های انگلیسی سمت چپ).
  • لوگو قابل کلیک کردن باشه و با کلیک کردن کاربر رو به صفحه اول سایت برگردونه.
  • وقتی موس روی لینک ها میره رنگشون عوض شه.

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

  • باور پذیری

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

  • کاربر مداری

بالاخره هر کاری که کنید، کارایی و کاربرپسند بودن هر سایتی وابسته به سلیقه و خواسته های کاربرهاست. (اگه برای کاربراتون سایت طراحی نمی کنید پس برای کی طراحی می کنید؟)
برای اینکه از سلیقه کاربراتون باخبر بشید ازشون بازخورد بگیرد و از برنامه های تست کاربر استفاده کنید و بر اساس نتایجی که بدست میارید تغییراتی که سایت لازم داره رو اعمال کنید.
چندتا از ابزارهای تست کاربر:

  • Crazy Egg با این برنامه می تونید چند دامنه رو با یک نام کاربری بررسی کنید و کارایی سایتتون رو بسنجید.
  • Loop11  حتی اگر تجربه کار کردن با HTML ندارید، کار کردن با این برنامه راحته.

خودتونو بذارید جای کاربرا و ببینید تو هر مرحله از راه چه نیازهایی دارن و تو سایتتون دنبال چی می گردن و چی پیدا می کنن.
شما چه راههای دیگه ای برای کاربر پسند و کارا شدن یه وبسایت بلدید؟

اطلاعات تماس
شعبه 1 و آموزشگاه: تهران، سعادت آباد، چهار راه سرو، کوچه آریا، پلاک 4، طبقه 4، واحد 7
شعبه 2: تهران، سعادت آباد، ضلع جنوب غربی چهار راه سرو، پلاک 62، طبقه 5، واحد 12
تلفن ها: 02122083926 - 02122085386 - 02122082258
ایمیل: info@sitedar.com
افتخارات و مجوزها
  • جزو شرکت های خلاق معاونت علمی
  • عضو سازمان نظام صنفی رایانه ای
  • رتبه ۴ شورای عالی انفورماتیک
  • دارای مجوز آموزشگاه از فنی و حرفه ای
  • دارای مجوز نشر دیجیتال
  • دارای پروانه کانون آگهی و تبلیغاتی
  • پروانه کسب و کارهای مجازی
  • عضو انجمن کسب و کارهای اینترنتی
  • دارای نماد اعتماد الکترونیکی
پشتیبانی 24 ساعته 7 روز