Рубрика «веб-дизайн» - 49

Статья была опубликована на smashingmagazine и была переведена специально для Хабрахабра.

image

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

Звучит довольно просто, не так ли? А теперь давайте рассмотрим это вот с какой точки зрения… Число интернет-пользователей, страдающих деменцией во всем мире постоянно растет. У них могут быть разные уровни компьютерной грамотности, они могут испытывать следующие проблемы: потеря памяти, спутанность сознания, проблемы, связанные со зрением и восприятием, трудности с упорядочиванием и обработкой информации, речевые проблемы, неспособность решать некоторые проблемы и задачи.

Когда мы думали, что комплексное проектирование уже плотно закрепилось на своих позициях, возникло совершенно новое измерение.
Читать полностью »

Статья была опубликована на LayerVault и была переведенна специально для Хабрахабр.

Идея упрощения

image

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

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

Читать полностью »

Ник Бабич разработчик, теч энтузиаст и просто влюбленный в UX/UI специалист написал заметку в блоге UX Planet про бесконечную прокрутку, мы сделали адаптивный перевод материала специально для читателей Хабрахабр.

image

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

Бесконечная прокрутка

Бесконечная прокрутка — это технологический прием, который позволяет пользователям прокручивать массивный кусок контента так, чтобы его конец не попадал в поле зрения. Этот метод просто обновляет страницу при прокрутке вниз. Хоть это и выглядит весьма заманчиво, данный метод не является идеальным решением для любого сайта или приложения.

image

Плюс №1: Вовлечение пользователя и раскрытие контента.

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

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

image
Океан заметок Pinterest
Читать полностью »

В 2014 году главным трендом в мире UI-дизайна стали кнопки-призраки. Речь идет о прозрачных кнопках прямоугольной или квадратной формы, которые также называют «пустыми», «голыми» или «полыми», мы не могли обойти стороной этот материал и сделали адаптивный перевод статьи журнала UX Planet специально для читателей Хабрахабр.

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

image

Обычный внешний вид (слева) и внешний вид при наведении курсора (справа).

image

Обычно размер кнопок-призраков превышает размер традиционных кнопок, а размещают их в самых заметных местах, например, прямо по центру экрана. Стильный эффектный внешний вид, если все сделано правильно, привлекает внимание своим контрастом с остальной страницей, а цветовой акцент при наведении курсора придает дополнительный шарм.
Читать полностью »

Я сделал мой сайт диалоговым. Здесь рассказано, чему я научился.

image

Несколько недель назад я начал эксперимент на своём сайте. Я сделал его диалоговым. Обратная связь, отзывы и освещение в сети были абсолютно удивительными. Я получил более 300 записок по почте за первые 24 часа.

Спасибо всем, кто нашёл время пообщаться со мной на сайте. Это было прекрасно!

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

Так что — вперёд.
Читать полностью »

Эволюция маркетинга: от маленького интернет-магазина до гипермаркета - 1

В России непринято рассказывать о закрытых проектах. Однако, закрытие проекта, вовсе не означает, что все что с ним происходило было неправильно.

Это история о том как создавался сайт интернет-магазина Сотмаркет и менялась работа с каналами привлечения трафика по мере роста компании.

Примечание автора. Ошибка выживших

«Живые трупы», — вот так описал историк Кевин Вильсон пилотов Второй мировой.

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

Эволюция маркетинга: от маленького интернет-магазина до гипермаркета - 2

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

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

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

Систематическая ошибка выживших — это склонность фокусироваться на одной группе данных («выживших»), игнорируя или не имея данных по другой («погибших»).

Читать полностью »

Как создавать визуально эффективные призывы к действию - 1

Как сделать призыв к действию деликатным, но эффективным? Это статья раскрывает несколько простых секретов. Мы постарались воспользоваться ими при создании нового дизайна для нашего сайта «Я люблю ИП». И заодно решили её перевести. Надеемся, эта статья также будет вам полезна.

Создавать эффективные посадочные страницы — это непростая задача. Это постоянная борьба между тем, что работает и что нет. Это непрерывный процесс тестирования, измерений и улучшений.

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

Хорошая новость состоит в том, что поведение людей достаточно предсказуемо, и мы можем это использовать.
Читать полностью »

Ценность многошрифтового дизайна - 1

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

«Очень нравится сайт, потому что он не боится нарушать одно из первых правил шрифта – не использовать слишком много разных гарнитур. Используется четыре шрифта, два из семейства sans-serif и два из serif — Galaxie Copernicus, Interstate, Harriet и Nimbus Sans. Основной момент такого дизайна – последовательность, и сайт Бетани Хек последовательно использует каждый из шрифтов для своей цели.»
— Джеремия Шоаф, Typewolf

Расцениваю это, как вызов. Спасибо, Джеремия!

Хочу поспорить и рассказать о ценности эклектичных систем, и о том, как создать структуру проекта, чтобы эффективно использовать совместно несколько шрифтов.

Ценность многошрифтового дизайна - 2

Так почему же у нас есть правила насчёт количества используемых гарнитур?
Читать полностью »

image

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

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

Как мы увеличили процент регистраций на 68% с помощью дизайна форм - 1

Советы и примеры в дизайне форм логина и регистрации.
Казалось бы, что может быть проще формы регистрации и, уж тем более, входа на сайт? Пара полей и кнопка. Но в нюансах этой простоты кроется успешность выполненной работы и количество пользователей вашего сервиса. Как сделать формы проще, процесс приятнее и тем самым снизить количество уходов? Расскажу какими правилами мы руководствовались при разработке нашего сообщества предпринимателей BOSS.ZONE.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js