اصول خوب طراحی وب سایت و دستورالعمل های موثر طراحی وب

برای استفاده صحیح از اصول ، ابتدا باید نحوه تعامل کاربران با وب سایت ها ، نحوه تفکر آنها و الگوهای اساسی رفتار کاربران را بفهمیم.

کاربران چگونه فکر می کنند؟

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

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

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

دستورالعمل های طراحی وب

کاربران نمی خوانند ، آنها اسکن می کنند. توجه کنید که چگونه "گرم" ها در وسط جملات ناگهانی رخ می دهند. این برای فرآیند اسکن معمول است.
کاربران وب بی تاب هستند و بر رضایت فوری اصرار دارند. یک اصل بسیار ساده: اگر وب سایتی نتواند انتظارات کاربران را برآورده کند ، پس طراح نتوانسته کار خود را به درستی انجام دهد و شرکت ضرر می کند. هرچه بار شناختی بیشتر باشد و ناوبری کمتر بصری باشد ، کاربران تمایل بیشتری به ترک وب سایت و جستجوی گزینه های دیگر دارند. [JN / DWU]
کاربران انتخاب بهینه نمی کنند. کاربران سریعترین راه را برای یافتن اطلاعاتی که به دنبال آن هستند جستجو نمی کنند. آنها همچنین صفحه وب را به صورت خطی اسکن نمی کنند و به ترتیب از یک بخش سایت به بخش دیگری می روند. در عوض کاربران راضی هستند آنها اولین گزینه معقول را انتخاب می کنند. به محض اینکه پیوندی را پیدا کنند که به نظر می رسد ممکن است به هدف منجر شود ، احتمال بسیار خوبی وجود دارد که فوراً روی آن کلیک شود. بهینه سازی سخت است و مدت زمان زیادی طول می کشد. رضایت م moreثرتر است.

اصول طراحی وب موثر

جریان خواندن متوالی در وب کار نمی کند. تصویر سمت راست روی تصویر در پایین ، مسیر اسکن یک صفحه مشخص را توصیف می کند.
کاربران از شهود خود پیروی می کنند. در بیشتر موارد کاربران به جای خواندن اطلاعاتی که یک طراح ارائه داده است ، با هم درگیر می شوند. به گفته استیو کروگ ، دلیل اصلی آن عدم توجه کاربران است. "اگر چیزی را پیدا کنیم که کارساز باشد ، به آن پایبند خواهیم بود. برای ما مهم نیست که ما می فهمیم چگونه کار می کنیم ، تا زمانی که بتوانیم از آنها استفاده کنیم. اگر قرار است مخاطبان شما مانند شما در حال طراحی بیلبورد باشند ، بیلبوردهای عالی طراحی کنید. "
کاربران می خواهند کنترل داشته باشند. کاربران می خواهند بتوانند مرورگر خود را کنترل کرده و به ارائه مداوم داده ها در سراسر سایت اعتماد کنند. به عنوان مثال. آنها نمی خواهند که پنجره های جدید به طور غیرمنتظره ظاهر شوند و می خواهند با یک دکمه "بازگشت" به سایتی که قبلاً بوده اند بازگردند: بنابراین یک عمل خوب است که هرگز پیوندها را در پنجره های مرورگر جدید باز نکنید.
1. کاربران را به فکر وادار نکنید
طبق اولین قانون استفاده از Krug ، صفحه وب باید واضح و قابل توضیح باشد. هنگام ایجاد سایت ، وظیفه شما این است که از علامت س questionال خلاص شوید - تصمیماتی که کاربران باید آگاهانه بگیرند ، با توجه به جوانب مثبت ، منفی و گزینه های دیگر.

اگر پیمایش و معماری سایت بصری نباشد ، تعداد علامت های سال افزایش می یابد و درک نحوه کار سیستم و چگونگی رسیدن از نقطه A به نقطه B را برای کاربران دشوار می کند. ساختاری واضح ، سرنخ های تصویری متوسط ​​و به راحتی قابل تشخیص است. پیوندها می توانند به کاربران در یافتن مسیر خود برای رسیدن به هدف کمک کنند.

نمونه طراحی وب سایت خوب

بیایید نگاهی به یک مثال بیندازیم. Beyondis.co.uk ادعا می کند "فراتر از کانال ، فراتر از محصولات ، فراتر از توزیع" است. چه مفهومی داره؟ از آنجا که کاربران تمایل دارند وب سایت ها را طبق الگوی "F" کشف کنند ، این سه عبارت اولین عناصری است که کاربران پس از بارگیری در صفحه مشاهده می کنند.

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

دستورالعمل های طراحی وب

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

با کاهش بار شناختی ، درک ایده سیستم را برای بازدیدکنندگان آسان تر می کنید. پس از دستیابی به این هدف ، می توانید ارتباط برقرار کنید که چرا 

سیستم مفید است و کاربران چگونه می توانند از آن بهره مند شوند. اگر افراد نتوانند راه خود را در این زمینه پیدا کنند از وب سایت شما استفاده نمی کنند.

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

همانطور که رایان سینگر - توسعه دهنده تیم 37Signals - اظهار داشت ، اگر از آنها بخواهند پس از دیدن ویژگی این ویژگی ، از آنها خواسته شود ، مشتاقانه مشتاق ارائه آدرس ایمیل هستند ، بنابراین آنها از آنچه می خواهند بگیرند ایده داشتند. در عوض.

عکس صفحه

Stikkit یک مثال عالی برای یک سرویس کاربر پسند است که تقریباً هیچ چیز از بازدید کننده نیازی به سرگرمی و راحتی ندارد. و این همان چیزی است که شما می خواهید کاربرانتان در وب سایت شما احساس کنند.

عکس صفحه

ظاهراً ، مایت به موارد بیشتری نیاز دارد. با این وجود ثبت نام در کمتر از 30 ثانیه انجام می شود - از آنجا که فرم دارای جهت افقی است ، کاربر حتی نیازی به پیمایش صفحه ندارد.

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

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

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

Enso

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

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

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

عکس صفحه

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

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

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

تجارت صحبت کنید از نام های زیبا یا هوشمندانه ، نام های ناشی از بازاریابی ، نام های خاص شرکت و نام های فنی ناشناخته خودداری کنید. به عنوان مثال ، اگر سرویسی را توصیف می کنید و می خواهید کاربران یک حساب کاربری ایجاد کنند ، "ثبت نام" بهتر از "اکنون شروع کنید!" که باز هم بهتر از "کاوش خدمات ما" است.

عکس صفحه

Eleven2.com مستقیماً به موضوع می رسد. بدون کلمات زیبا ، بدون اظهارات اغراق آمیز. در عوض قیمت: دقیقاً همان چیزی که بازدیدکنندگان به دنبال آن هستند.

یک راه حل بهینه برای نوشتن موثر این است

از عبارات کوتاه و مختصر استفاده کنید (در اسرع وقت به نکته برسید) ،
استفاده از طرح قابل اسکن
از زبان ساده و عینی استفاده کنید (تبلیغات نیازی به نظر نمی رسد مانند a

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

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

عکس صفحه

Finch به وضوح اطلاعات مربوط به سایت را ارائه می دهد و گزینه های انتخابی را به بازدیدکنندگان می دهد بدون اینکه آنها را با محتوای غیر ضروری شلوغ کند.

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

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

عکس صفحه

فضای سفید خوب است. Cameron.io از فضای سفید به عنوان عنصر اصلی طراحی استفاده می کند. نتیجه یک طرح قابل اسکن خوب است که به محتوا جایگاه مطلوب و شایسته را می دهد.

8. برقراری ارتباط موثر با "زبان قابل مشاهده"
آرون مارکوس در مقاله های خود درباره ارتباط تصویری م effectiveثر ، سه اصل اساسی را که در استفاده از اصطلاح "زبان مرئی" دخیل است ، بیان می کند - محتوایی که کاربران روی صفحه می بینند.

سازماندهی: یک ساختار مفهومی روشن و سازگار به کاربر ارائه دهید. سازگاری ، چینش صفحه ، روابط و قابلیت جابجایی از مفاهیم مهم سازمان هستند. قراردادها و قوانین یکسان باید در مورد همه عناصر اعمال شود.
صرفه جویی: بیشترین کار را با کمترین میزان نشانه و عناصر بصری انجام دهید. چهار نکته اصلی که باید در نظر گرفته شود: سادگی ، شفافیت ، متمایز بودن و تأکید. سادگی فقط عناصری را شامل می شود که از اهمیت بیشتری برای برقراری ارتباط برخوردار هستند. وضوح: همه اجزا باید طوری طراحی شوند که معنای آنها مبهم نباشد. متمایز بودن: خصوصیات مهم عناصر لازم باید قابل تشخیص باشد. تأکید: مهمترین عناصر را باید به راحتی درک کرد.
برقراری ارتباط: ارائه را با قابلیت های کاربر مطابقت دهید. برای برقراری ارتباط موفقیت آمیز ، رابط کاربری باید خوانایی ، خوانایی ، تایپوگرافی ، نمادگرایی ، نماهای متعدد و رنگ یا بافت را در تعادل نگه دارد. از حداکثر استفاده کنید 3 نوع تایپ در حداکثر اندازه های 3 نقطه ای - حداکثر 18 کلمه یا 50-80 حرف در هر خط متن.
9. کنوانسیون ها دوستان ما هستند
طراحی متعارف عناصر سایت منجر به ایجاد یک وب سایت خسته کننده نمی شود. در واقع ، کنوانسیون ها بسیار مفید هستند زیرا منحنی یادگیری را کاهش می دهند ، نیاز به پی بردن به چگونگی عملکرد را کاهش می دهد. به عنوان مثال ، اگر همه وب سایت ها از دیدگاه های مختلف RSS بصری ارائه دهند ، یک کابوس قابل استفاده خواهد بود. این خیلی متفاوت از زندگی عادی ما نیست ، جایی که ما می خواهیم به اصول اولیه نحوه سازماندهی داده ها (پوشه ها) یا خرید (قرار دادن محصولات) عادت کنیم.

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

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

استیو کروگ پیشنهاد می کند که فقط درصورت نوآوری بهتر است که می دانید واقعاً ایده بهتری دارید اما بهتر است از مزایای کنوانسیون استفاده کنید.

10. تست زودهنگام ، آزمایش غالباً
این اصل اصطلاح TETO باید در مورد هر پروژه طراحی وب اعمال شود زیرا آزمایشات کاربردی اغلب بینش اساسی در مورد مشکلات مهم و مسائل مربوط به یک طرح خاص را ارائه می دهند.

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

الزامات جانبی ، ذینفعان ، بودجه و غیره).

چند نکته مهم که باید بخاطر بسپارید:

با توجه به استیو کروگ ، آزمایش یک کاربر 100٪ بهتر از تست هیچ یک و آزمایش یک کاربر در اوایل پروژه بهتر از آزمایش 50 کاربر در پایان است. مطابق با قانون اول بوهم ، خطاها بیشتر در طول فعالیتها و الزامات طراحی وجود دارند و هرچه دیرتر برداشته شوند گرانتر هستند.
آزمایش یک فرایند تکراری است. این بدان معنی است که شما چیزی را طراحی می کنید ، آن را تست می کنید ، اصلاح می کنید و سپس دوباره آزمایش می کنید. ممکن است مشکلاتی وجود داشته باشد که در دور اول یافت نشده است زیرا کاربران عملاً توسط سایر مشکلات مسدود شده اند.
تست های قابلیت استفاده همیشه نتایج مفیدی دارند. یا به مشکلاتی که دارید اشاره خواهید کرد و یا به عدم وجود نقص عمده در طراحی اشاره خواهید کرد که در هر دو مورد یک دیدگاه مفید برای پروژه شما است.
طبق قانون وینبرگ ، یک توسعه دهنده برای آزمایش کد خود نامناسب است. این برای طراحان نیز صدق می کند. بعد از اینکه چند هفته در سایتی کار کردید ، دیگر نمی توانید آن را از منظر تازه مشاهده کنید. شما می دانید که چگونه ساخته شده است و بنابراین دقیقاً می دانید که چگونه کار می کند - شما از آزمایشکنندگان مستقل و بازدیدکنندگان سایت خود برخوردار نیستید.