سفارش تبلیغ
صبا ویژن

8 قدم تا طراحی سایت و طراحی فروشگاه تاثیر گذار

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

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

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

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

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

 

8 دستورالعمل طراحی وب سایت برای تجربه کاربر استثنایی

1) سادگی وب سایت

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

 

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

 

از قابلیت استفاده و دیدگاه UX، سادگی دوست شما است. و شما می توانید سادگی را به روش های مختلفی استفاده کنید. در اینجا چند نمونه است:

 

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

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

گرافیک فقط از آنها استفاده کنید اگر آنها به یک کاربر یک کار را انجام می دهند یا یک کار خاص انجام می دهند (فقط اضافه کردن گرافیک به صورت غیر عادی).

در اینجا یک مثال عالی از طراحی صفحه اصلی ساده از Rockaway Relief است:

 

rockaway-relief-homepage-simple-design.png

 

 هر چیزی که ارزشش را اضافه نکنید نوار را دور کنید، سپس بعضی از بافت بصری را دوباره وارد کنید.

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

 

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

بافت بصری لازم و مورد علاقه در حال حاضر پشتیبانی از اثر زیبایی شناسی - قابل استفاده است، اما نه در هزینه محتوای صفحه کلیدی.

- اطلاعات بیشتر در: http://www.uxmatters.com/mt/archives/2014/08/principles-over-standards.php#sthash.GdOvzpl1.dpuf

هر چیزی که ارزشش را اضافه نکنید نوار را دور کنید، سپس بعضی از بافت بصری را دوباره وارد کنید.

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

 

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

بافت بصری لازم و مورد علاقه در حال حاضر پشتیبانی از اثر زیبایی شناسی - قابل استفاده است، اما نه در هزینه محتوای صفحه کلیدی.

- اطلاعات بیشتر در: http://www.uxmatters.com/mt/archives/2014/08/principles-over-standards.php#sthash.GdOvzpl1.dpuf

2) سلسله مراتب بصری در طراحی سایت

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

طراحی سایت

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

 

در مثال زیر از Spotify، می توانید ببینید که Call-to-Action "Get Spotify Free" روی سلسله مراتب بصری نشسته است. برای شروع، در سمت چپ صفحه قرار دارد (بیشتر بازدیدکنندگان وب سایت ها را از چپ به راست اسکن می کنند). علاوه بر این، تنها عنصر بالای آن است که از رنگ بنفش تیره استفاده می کند که به طور طبیعی توجه شما را جلب می کند.

 

spotify-visual-hierarchy.png

 

3) قابلیت هدایت در وب سایت

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

 

در اینجا چند نکته برای بهینه سازی ناوبری سایت شما وجود دارد:

 

ساختار ناوبری اولیه خود را ساده (و در بالای صفحه خود) نگه دارید.

شامل ناوبری در پایین صفحه سایت شما.

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

یک جعبه جستجو را در بالای سایت خود قرار دهید تا بازدیدکنندگان بتوانند با کلمات کلیدی جستجو کنند.

گزینه های ناوبری زیادی را در یک صفحه ارائه ندهید.

خیلی عمیق حفاری نکن در بیشتر موارد، بهتر است که ناوبری خود را به بیش از سه سطح عمیق نگه دارید. (برای دیدن وضوح بیشتری در اطراف مسطح در مقابل Navs عمیق، این مقاله را بخوانید.)

پیوندها را در کپی صفحه خود قرار دهید و لینک هایی را که منجر به آنها می شود روشن کنید.

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

 

InVision_Nav.png

 

InVision_Nav_Main.png

 

و این ما را به اصل بعدی ما هدایت می کند ...

 

4) سازگاری

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

 

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

 

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

 

help-page-airbnb.png

 

5) قابلیت دسترسی

طبق گزارش comScore، میزان مصرف اینترنت در سال 2013 تا 2015 به میزان 30 درصد افزایش یافته است. در همین حال، مصرف اینترنت هوشمند اینترنت در طول مدت مشابه 78 درصد افزایش یافته است. درایو اینجا: برای ارائه یک تجربه کاربری واقعا عالی، سایت شما باید با دستگاه های مختلف (و سیستم عامل ها و مرورگرها) که بازدید کنندگان شما از آنها استفاده می کنند سازگار باشد.

 

در سطح بالا، این به معنای سرمایه گذاری در یک ساختار وب سایت است که بسیار انعطاف پذیر است - مانند طراحی پاسخگو. با یک سایت پاسخگو، محتوا به طور خودکار تغییر می یابد و تغییر می کند تا متناسب با ابعاد هر دستگاهی باشد که یک بازدید کننده از آن استفاده می کند. (مشتریان بازاریابی HubSpot: با استفاده از طراحی پاسخگو ساخته شده، محتوای HubSpot ساخته شده بر روی COS به طور خودکار برای بازدیدکنندگان از هر دستگاه بهینه سازی شده است.)

 

responsive_design_2-2.jpg

 

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

 

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

 

این ما را به اصل بعدی ما هدایت می کند ...

 

6) عادت در طراحی وب سایت

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

 

داشتن ناوبری اصلی در بالای صفحه (یا سمت چپ) یک صفحه است

داشتن یک آرم در بالا سمت چپ (یا مرکز) یک صفحه

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

داشتن پیوندها رنگ / ظاهر را هنگامی که روی آنها روی آن حرکت می کنید، تغییر دهید

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

 

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

بهینه سازی سایت

یکی از رایج ترین نمونه های کنوانسیون در طراحی وب: استفاده از نماد سبد خرید در یک سایت تجارت الکترونیک:

 

خرید-کارت-icons.png

 

در تصویر بالا، شما می توانید (از چپ به راست) آیکون های خرید سبد خرید از آمازون، Wayfair، و بهترین خرید را ببینید.

 

7) اعتبار وب سایت

در نهایت، با استفاده از کنوانسیون های طراحی وب - عناصر طراحی و استراتژی هایی که بازدید کنندگان قبل از آن آشنا هستند می توانند به سایت شما اعتبار بیشتری نشان دهند. و اگر شما در تلاش برای ساختن یک سایت که بهترین تجربه ممکن را فراهم می کند، اعتبار (a.k.a. میزان اعتماد سایت شما) می تواند راه طولانی را طی کند.

 

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

سئو

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

 

price-page-box.png

 

8) کاربر مرکزیت در وب سایت

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

 

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

 

در اینجا چند ابزار تست کاربر برای شروع کار شما وجود دارد:

 

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

Loop11 از این ابزار برای ایجاد تست قابلیت استفاده آسان - حتی اگر هیچ تجربه HTML نداشته باشید.

کاربر مست می باشد پرداخت Richard Littauer به مست و بررسی سایت شما. آیا من را باور نمی کنی؟ ما آن را آزمایش کردیم آن را چک کنید

(برای ابزارهای مفیدتر حتی بیشتر بخوانید).

 

با توجه به ویتامین T، 68 درصد از بازدیدکنندگان موفق به تبدیل شدن نمی شوند زیرا فکر نمی کنند که شما در مورد تجربه خود دچار مشکل می شوید. بنابراین، به عنوان آخرین نکته کاربرد / UX خرد، شروع به مراقبت بیشتر! خود را به کفش بازدید کنندگان سایت خود قرار دهید و آنها را در هر مرحله از راه خود نگه دارید.

 

اصولی که شما فکر میکنید طراحی وبسایت استثنایی و قابل استفاده بودن است؟

 

یادداشت سردبیر: این پست ابتدا در ژانویه 2012 منتشر شد و برای نوآوری، دقت و جامع بودن به روز شده است.

منبع