4 posts tagged

веб-дизайн

Почему принципы дизайна UX настолько сложны

UX дизайн

При создании программного обеспечения первое, о чем мы должны думать, – это пользовательский опыт.

Многофункциональное программное обеспечение снова и снова терпит неудачу в оптимизированном для пользователей опыте. Вам просто нужно вспомнить iPod от Apple, чтобы понять, что это правда. Microsoft Zune по всем меркам был лучшим устройством, с лучшим программным обеспечением и большей функциональностью. Но в конце концов пользователи ищут программные продукты, в которых легко разобраться, которые просты в освоении и навигации.

Пользовательский опыт не всегда считался важным компонентом разработки программного обеспечения. Функциональность и основные утилиты программного продукта часто давали больше приоритета Span UI и UX-дизайну. Сейчас такие компании, как Apple, сделали подход «пользователь важнее» гораздо более популярным. Вместо того чтобы создавать программный продукт с определенной функциональностью, а затем после завершения работы над ним вернуться и спрашивать пользователей, как оптимизировать опыт, программное обеспечение создается с учетом опыта даже до создания прототипа.

Принципы дизайна UX просты в понимании. Отличный пользовательский интерфейс означает, что программный продукт является удобным, функциональным, доступным и приятным в использовании. Услышав эти принципы, вы можете подумать, что добавить вашему программному продукту функциональности, удобства использования, доступности – простая задача. Хотя сами принципы могут показаться интуитивными, невероятно сложно интегрировать их все в ваш программный продукт. Это связано с тем, что стильные тенденции дизайна могут противоречить принципам дизайна UX и может быть сложно сбалансировать эти тенденции с основными принципами дизайна UX.

Другим фактором, который усложняет этот вопрос, является тот факт, что то, как мы взаимодействуем с технологией, наше восприятие того, что является простым в использовании и как наилучшим образом реализовать эту простоту, является движущейся целью. Новые технологии постоянно развиваются, меняются и формируют наши ожидания от программных приложений. Например, прогресс в искусственном интеллекте, прогресс в личных помощниках AI специально создали целый новый подраздел пользовательского опыта, называемый VUI, или голосовым пользовательским интерфейсом.

UX и пользовательский интерфейс в свое время были практически синонимами. Сегодня UX охватывает путь пользователей, невыразимые качества программных приложений, базовое ощущение программного продукта, которое представляет собой намного больше, чем визуальный дизайн, графический или голосовой интерфейс. Точно так же, как бренд Coca-Cola – это гораздо больше, чем просто рецепт, так и UX каждого программного приложения. UX – это бренд, личность и базовая интерактивность программного продукта. Это означает, что UX связан с каждым аспектом приложения, то есть принципы удобства использования, доступности и функциональности должны присутствовать в каждом слое, каждом аспекте, каждой части пользовательского интерфейса.

UX – это в конечном счете то, что продукт вызывает у пользователя. Отношение, настроение, личный опыт, возникающие в результате использования вашего программного приложения, являются частью пользовательского опыта. Мы используем основные принципы дизайна UX, чтобы достичь приятного, обогащающего опыта для людей, использующих ваше приложение. Мы делаем приложение интуитивным, делая полезность более важной, чем стильность, интуитивность более важной, чем изобретательность и т. д. и т. п. Тысячи решений, которые вы принимаете, когда следует делать какие приоритеты, какие дизайны где использовать, какой язык использовать и почему, составляют весь процесс дизайна UX. Привлекательный, сложный и деликатный процесс, требующий огромной заботы, преданности делу и переработки.

Пользовательский опыт, как уже было сказано ранее, является движущейся целью. Нет никакого ориентира для идеального юзабилити, доступности и функциональности. Нет объективной оценки счастья, удовлетворения или удовлетворенности продуктом. У нас есть только оценки, а данные, которые мы собираем о потребителях, – это просто данные, без контекста нет смысла, без экспериментирования нет контекста и без инноваций нет экспериментирования. Это означает, что основные принципы дизайна UX требуют большего, чем просто их запоминания и реализации. Освоение принципов дизайна UX требует постоянного изучения, внимания к вашей аудитории и постоянных инноваций. Поэтому, хотя сами принципы дизайна интуитивно понятны, их достижение не так просто.

2018   веб-дизайн   интерфес

Принципы, особенности и типы адаптивного веб-дизайна

Адаптивный веб-дизайн

Как оценивают человека, которого встречают впервые? Разумеется – по одежке! То, как он выглядит, во что одевается и какими аксессуарами пользуется, способно сказать намного больше, чем самая лучшая визитка. А как пользователь оценивает сайт, на который он заходит? В первую очередь – по уровню его исполнения. И самым современным критерием такого уровня стал адаптивный веб-дизайн.

Что такое адаптивный веб-дизайн?

Времена, когда сайты можно было просматривать только с помощью персональных компьютеров, давно ушли в прошлое. Сегодня спектр устройств, способных предоставить своему владельцу доступ в Интернет, невероятно обширен, и их технические характеристики, размеры и параметры экранов очень разнообразны. Для ресурса, который идет в ногу со временем, важно, чтобы на любом таком устройстве сайт отображался бы максимально корректно. И обеспечивает такую корректность как раз адаптивный веб-дизайн.

Такой адаптивный веб-дизайн, называемый в английской терминологии «responsive web design» – это такой подход к веб-дизайну, при котором ресурс будет отражаться корректно на любых устройствах, посещающих его пользователей. И не важно, насколько велик или мал у пользователя экран и, каким будет у него разрешение – главное, чтобы на устройстве был доступ к Интернету. А просмотр ресурса будет удобным всегда, и не потребуется использовать расширение той или иной области сайта, чтобы нажимать на ссылки.

Для чего необходим адаптивный веб-дизайн?

Итак, адаптивный дизайн нужен для того, чтобы просматриваемая страница подстраивалась под параметры устройства, с которого пользователь на нее зашел. Почему именно это сегодня настолько важно использовать в веб-дизайне?

Во-первых, потому, что для выхода в интернет сегодня используются самые разные устройства с собственными экранными разрешениями и размерами экранов. И для того, чтобы пользователь мог комфортно посмотреть ваш сайт тем, что есть в его распоряжении, сайт должен уметь идеально приспосабливаться ко всем параметрам пользовательского устройства.

Во-вторых, мобильные устройства сегодня из банального средства связи превратились в весьма многофункциональные и очень популярные гаджеты, которые используются и для просмотра сайтов. И доля такого мобильного трафика на любом ресурсе очень высока. Если таким посетителям на вашем ресурсе будет неудобно, они забудут о нем и отправятся на другие.

В-третьих, мы живем в век даже не высоких, а сверхвысоких скоростей, и для многих информация из Интернета часто очень важна, настолько важна, что в случае необходимости они должны получить доступ к нужному им ресурсу немедленно, и корректно просмотреть на нем все необходимое с того устройства, которое у них под рукой. А позаботиться о том, чтобы их просмотр был удобным, и они не раз еще вернулись именно на ваш ресурс, вам позволит использование адаптивного веб-дизайна.

Чем отличается адаптивный веб-дизайн от мобильных версий сайтов?

Cтремление к удобному просмотру сайтов с мобильных устройств – идея далеко не новая, и как раз для этого создаются мобильные версии сайтов ресурсов. Почему выбирать следует именно адаптивный веб-дизайн?

Причина проста – у мобильных версий есть недостатки, важные для дизайнеров:

• под каждую операционную систему дизайнер должен сделать свое собственное приложение или отдельную версию сайта. Затраты времени, денег и ресурсов вырастают во столько же раз, сколько отдельных версий потребуется сделать;
• разработанное дизайнером приложение для просмотра пользователем должно быть сначала загружено на его гаджет. Это требует усилий – а усилия без твердой уверенности в полезности приложения пользователь не любит и постарается найти нужное в другом месте;
• использование мобильной версии ресурса делит весь его трафик на два потока – трафик самого сайта и трафик мобильных версий. Такое разделение автоматически снизит показатели посещаемости портала;
• созданные мобильные приложения нужно или постоянно синхронизировать с сайтом или одними и теми же материалами наполнять сначала сайт, потом его мобильную версию. В первом случае это дополнительные усилия, во втором – двойная работа.

Вывод из этого очевидный: адаптивный веб-дизайн не просто удобен и комфортен для посетителей сайта – он выгоден и для самих веб-дизайнеров, поскольку экономит им время и силы, и для владельцев – потому что обходится дешевле. Хотя обратной стороной его использования является наличие подготовленного и знакомого с этой технологией специалиста, которого не всегда можно отыскать.

Пять ключевых принципов адаптивного дизайна

Начинается процесс создания адаптивного веб-дизайна с того, что делается его версия, адаптирующаяся под мобильные гаджеты. Такая версия будет передавать те же самые идеи и смысл, что и основной портал, но достигаться это будет в рамках минимума кнопок и небольших параметров экрана. В работе используется несколько ключевых принципов:

  • мобильная версия создается с самого начала;
  • создается гибкий макет на базе сетки;
  • изображения делаются гибкими;
  • прорабатываются медиа-запросы.

И безусловным принципом будет проведение постоянных и последовательных улучшений.

Основные варианты адаптивных макетов

Все используемые сегодня адаптивные макеты разделяются на несколько основных типов:

  • “резинка” – сжимает сайт до размеров экрана гаджета и выстраивает информацию в ленту;
  • “перенос блоков” – наиболее простой вариант, выстраивающий все блоки ресурса в нижней части макета;
  • “переключающиеся макеты” – самый комфортный при просмотре с разных устройств вариант, предоставляющий отдельный макет под каждое устройство;
  • адаптивные возможности «малой кровью» – меняется только масштаб типографики и изображений, поэтому вариант подходит только для простых сайтов;
  • “панели” – предоставление дополнительного меню после горизонтального или вертикального тапа.

Разумеется, представленные типы макетов – не панацея на все случаи, поэтому каждый проект требует своего макетного подхода.

2018   веб-дизайн

7 способов улучшить навигацию по каталогу интернет-магазина

Фильтры, которые владельцы интернет-магазинов устанавливают для более точного подбора товара по поисковому запросу, помогут не только ускорить поиск необходимых вещей и произвести хорошее впечатление на покупателя, но также повысят продажи.

 Такие критерии как выдаваемые по запросу результаты, легкость использования и влияние на уровень продаж показывают, насколько хороша система поиска на сайте Вашего интернет-магазина.



1. Установите фильтры по всем отличительным особенностям товара

Поисковый фильтр на сайте должен помочь покупателю отыскать именно тот продукт, который он ищет. Если товар предложен в разных размерах, расцветках или стилях, то каждый из вариантов стоит внести в поисковый фильтр.

 Хорошим примером является сайт Threadless, ведущий онлайн-поставщик футболок, который предлагает посетителям поисковый фильтр по цвету, размеру и стилю.

Threadless представляет клиентам поисковый фильтр по характеристикам.

 При размещении поискового фильтра на сайте нужно учесть, что критерии отбора для разных товаров отличаются. Так, Вы вряд ли ожидаете увидеть те же критерии отбора по каталогу автозапчастей, что и по ассортименту футболок.



2. Установите тематические фильтры

В дополнение к поиску по основным характеристикам товара подумайте о размещении на сайте дополнительных тематических фильтров или тех, что охватывают многие категории каталога. Это также может помочь покупателю в поисках нужных вещей.

 Онлайн-магазин футболок Design by Humans предлагает поисковые фильтры по модным трендам, новинкам и популярности. Эта опция расположена в верхней части сайта и при желании может быть использована.

Хороший пример – фильтры по новинкам и трендам. «Новинка» необязательно подразумевает недавний выпуск товара, но также может указывать на новые добавленные на сайт вещи.

 На этом же сайте слева размещены и тематические фильтры по виду товара. Они позволяют покупателю выбрать коллекционный товар на различную тематику (будь то Звездные войны, Assassin’s Creed: Единство, Г.Ф. Лавкрафт) или же по категориям.

К тематическим фильтрам относится и поиск по коллекциям (например, Звездные войны), как это оформлено на Design by Humans.



3. Укажите количество результатов по каждому из критериев

И хотя указание количества результатов по запросам не так распространено, как хотелось бы, эта информация может быть полезна для покупателей. Например, в ситуации, если покупатель знает, что при применении фильтра, количество выводимых товаров сократится до двух, он может от него отказаться.

 Jinx, основной товар которого – футболки, показывает посетителям, как выбор определенного фильтра влияет на количество выведенных на запрос вещей.

Отображение количества товара при применении определенного критерия может помочь покупателю решить, стоит ли применять этот фильтр. Наглядный пример с сайта Jinx.

 Важно, что при добавлении нового критерия в фильтр, информация обновляется. Например, покупатель выбрал категорию «Футболки» и в наличии увидел 378 размера S и 362 М. Если в фильтр добавить еще один критерий по цвету – «красные», то информация по наличию красных футболок размеров S и М должна обновиться.

 Еще одна важная деталь – необходимо скрывать фильтры по тем категориям, где нет ни одного товара. Например, в наличии не осталось красных футболок маленьких размеров. Таким образом, возможность выбрать в фильтре в дополнение к «красному» маленькие размеры должна быть скрыта или убрана.



4. Сделайте поиск по нескольким критериям одновременно


Хотя поисковые фильтры и нацелены на то, чтобы помочь покупателям найти точно тот товар, в котором они заинтересованы, поисковые формы все равно должны предоставлять свободу выбора: указание более одного фильтра в рамках одного критерия.

 Такую возможность предоставляет сайт BustedTees. Там покупатель может выбрать одновременно несколько цветов (например, черный или белый) или разные размеры.

Некоторые покупатели захотят выбрать в одном фильтре две и более характеристик (по цвету, цене, схожести товара). Хороший пример на BustedTees.com.

 Но зачем покупателю искать одновременно и большие и маленькие размеры? Возможно, мать хочет приобрести для двух сыновей одинаковые футболки.



5. Указывайте уже примененные фильтры

Институт Баймарда (The Baymard Institute), исследовательский центр, опубликовал доклад о системах поиска на сайтах интернет-магазинов. Там рекомендуется указывать по порядку по критериям уже примененные фильтры, а в самом верху, над поиском, создать их контрольный список.

 Подобное размещение и дублирование примененных фильтров облегчит покупателям навигацию по сайту, позволит просмотреть и быстро удалить неактуальные критерии.

 Интерфейс сайта Jinx – хороший тому пример.

 Threadless неплохо поработал над указанием примененных фильтров.



6. Сделайте поиск удобным для пользователей мобильных устройств

Как и в случае с дизайном и интерфейсом любого современного сайта, использование поисковой системы с мобильных устройств не должно вызывать затруднений. Убедитесь, что критерии в фильтре понятны и доступны для выбора.

 Если зайти на сайт Jinx со смартфона, то на сайте так же присутствуют фильтры по критериям с удобными для нажатия кнопками и контрольный список.

Поисковый фильтр должен поддерживаться мобильными устройствами.



7. Не дублируйте контент

Все особенности, дизайнерские решения, а также контент интернет-магазина должны быть в первую очередь удобны и привлекательны для людей. Смысла в том, что контент на сайте будет дублироваться при запросах, нет. Это может помешать поисковым системам индексировать Ваш сайт.

 По сути, Вы стремитесь найти простой и оригинальный способ поиска по сайту. Сервис Google Webmaster создал список возможных ошибок при оформлении фильтра. Поиск по фильтрам может быть использован не только людьми, но и ботами поисковых систем.

2018   веб-дизайн   интернет-магазин

С чего начать изучение Веб-дизайна. ТОП-5 советов

Если вы не знаете с чего начать изучение, а так же, с какой стороны подойти к данному материалу, то эта статья будет Вам полезна.

Что же такое Веб-дизайн?

Для многих это только «рисование» веб-сайтов, и многие начинающие дизайнеры «грешат» чрезмерными украшательствами, они стараются ярче проявить свой креатив, забывая об удобстве использования сайта.

А ведь веб дизайн – это совокупность проектирования и оформления интерфейса для оптимального взаимодействия пользователей с информацией на веб-сайте.

Так же, при изучении Веб-дизайна можно столкнуться с рядом проблем в данной области:

  1. Отсутствие специального образования. На сегодняшний день в нашей стране отсутствуют учебные заведения , которые выпускали бы полноценных дизайнеров, поэтому все дизайнеры стараются самостоятельно совершенствовать свои умения.
  1. Очень большой объем информации, которую очень сложно отфильтровать и выбрать действительно полезную и нужную.
  1. Отсутствие последовательности знаний. Существует огромное количество, статей, видео уроков и лекций, но необходимо это все собрать в единую систему, для лучшего усвоения материала новичками. И никакие курсы не смогут дать человеку полностью, тот необходимый уровень знаний, чтобы по окончанию обучения, человек стал действительно ПРОФИ. Ведь дизайн очень многообразен и дизайнер всегда старается себя «апгрейдить».
  1. Еще одна проблема заключается в том, что информация очень быстро устаревает. То, что работало 2 или 5 лет назад, сегодня практически не работает.

Что же необходимо знать, для того, чтобы создавать качественный веб-дизайн?

  • Программы;
  • Типографика;
  • Графика;
  • Психология;
  • Технологии;
  • Тренды
  1. На первом месте это – программы для создания сайтов. Это Adobe Photoshop CC либо Sketch для Mac OS. Знание данных программ в области веб-дизайна позволит быстро и качественно создавать макеты.
  1. На втором месте это – типографика. Это один из самых сложных предметов в дизайне, и является самой большой и частой проблемой у начинающих веб-дизайнеров. Типографика включает в себя работу с текстом, правильное его оформление, а так же взаимодействие текста с визуальным впечатлением сайта. Несет общий посыл сайта.
  1. На третьем месте по значимости это – графика. Ведь качественная работа с картинками и фотографиями делают действительно яркими и запоминающимися макеты, так сказать «лицо» дизайнера в портфолио, когда потенциальный заказчик судит вас как исполнителя. И если у вас будет грамотная типографика и оригинальная графика на вашем макете, то успех вам практически гарантирован.
  1. На четвертом месте можно выделить психологию. Ведь дизайнер должен знать азы психологии, чтобы понимать, как ведет себя пользователь на сайте, как реагирует на определенные сочетания цветов, на расположения элементов макета и на навигацию. Ведь только при грамотном расположении элементов, знании композиции, психологии дизайн и получается не только красивым, но и полезным. А это то, что нам нужно!
  1. Пятое место в нашем ТОПе занимают технологии. Это основы HTML, CSS и JS. То есть дизайнер должен быть немного фронтенд-разработчиком. Ведь для того чтобы создать макет, дизайнер должен понимать, как это будет воплощаться в верстке и как это будет работать в коде: анимация, какие скрипты можно использовать, как можно подать выпадающий элемент, а так же знать, какие элементы и как должны быть запрограммированы.

Так же веб-дизайнер не должен забывать про тренды. Мода и веяния в дизайне меняются каждый год. Именно по этому дизайнер должен быть в курсе того, что сейчас модно и актуально, и, что на текущий момент является самым эффективным в области веб-дизайна.

Как же начинающий веб-дизайнер может «добывать» знания?

Книги – это основа всего. На сегодняшний день, как и много лет назад, нет ничего более актуального, чем книга. Подберите для себя наиболее подходящие и интересные книги, которые помогут дать хорошую основу для старта.

Видео уроки и видео лекции. Замените ими сериалы и бесполезно «фонящий» телевизор. Каждое утро, собираясь на работу или учебу смотрите и слушайте интересные видео лекции на интересующую вас тему. Со временем знания из этих лекций будут откладываться на подсознательном уровне и помогут вам приобретать практические навыки. А в будущем вы сможете аргументировано доказать заказчику причины, по которым вы сделали тот или иной дизайнерский ход и сможете более грамотно продавать свои работы.

Статьи. Замените статьями ленту ваших социальных сетей. При любой удобной возможности читайте статьи на интересующие вас темы. В интернете есть много статей по колористике, типографике, модульным сеткам, а так же, по тому, как подобрать шрифтовую пару, как сделать мобильный дизайн и т.д. Соберите подборку интересных блогов, журналов и сайтов в области веб-дизайна и изучайте.

Ну, а если все таки социальные сети, то сделайте их использование максимально полезным. Подписывайтесь на правильные паблики, на личные странички знаменитых дизайнеров, которые довольно часто публикуют интересные материалы из своей практики, жизни и опыта, а так же часто переводят зарубежных дизайнеров.

Практика – является самым основным инструментом для изучения веб-дизайна. Если вы что то узнали новое, то обязательно примените эти знания на практике. Знания без практики практически ничего не стоят. Можно очень много знать, но если не практиковать и не создавать макеты, то скорость и качество вашего обучения будут очень неэффективными.

Хочется отметить еще один инструмент для изучения веб-дизайна – это копирование. Но копирование, именно для обучения. Если вы хотите освоить какой то элемент или какой то технический прием, то найдите этот прием у другого дизайнера и постарайтесь его скопировать, чем больше вы будете так делать в рамках обучения, тем богаче будет ваша база, и тем профессиональнее вы будете, выполняя коммерческий проект.

С таким набором знаний и умений вы сможете сделать ваш первый сайт, пусть простой, но уверенно работающий и приносящий деньги вашему заказчику.

2018   веб-дизайн