Много статей написано о дизайне, даже очень много, как о его UX (user experience), так и UI (user interface) составляющих. Эта статья не для новичков, так что углубляться в основы мы здесь не будем.

Мы рассматриваем дизайн и формулировки не с точки зрения внешнего вида, хотя есть проекты, в которых именно внешний вид составляет основную ценность продукта, а с точки зрения конверсии. В статье, на примере наших приложений Photo and Video Transfer app и Image Transfer, мы расскажем о работе над следующими задачами, при помощи дизайна:

• Увеличение количества email подписчиков.
• Увеличение количество пользователей разрешивших push notifications.
• Увеличение прибыли при работе по freemium модели.
• Увеличение показателя возвращаемости пользователей.
• Уменьшение показателей отказов.

Ниже вы сможете найти исходные данные и практические рекомендации. Так же крайне рекомендуем прочитать предыдущую статью о продвижении мобильных приложений, её вы cможете найти тут. Итак начнём.

Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

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

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

Это первая статья. Всего их будет 3.

На данный момент около 11-12% из 100 000 самых посещаемых сайтов — адаптивны, и нет сомнений, что в ближайшие несколько лет их количество возрастёт.

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

• Адаптивная модернизация.
• Адаптивные мобильные сайты.
• Адаптивный дизайн изначально для мобильных устройств.
• Стратегия поэтапности.

Адаптивная модернизация

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

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

После статьи «Управленческие инструменты: 4-фазный алгоритм решения проблем с людьми или «А чего ты хочешь, если ты такой хреновый менеджер?» нам писали: мол, ну так же не бывает, что со всем людьми и во всех случаях этот алгоритм работает? Это правда — этот алгоритм не очень хорошо работает, когда другой человек не видит с вами общего будущего. И/или же хочет вас банально отжать на что-то.

Один из самых полезных управленческих опытов в своей жизни я получил от руководства ремонтом собственной квартиры. На тот момент я уже 4 года работал менеджером — сначала руководил командой по тестированию Java на мобильных устройствах (мы работали с Sun), потом руководил командой в Intel. Я прочел Тома Демарко. Джоэла Спольски, прошел несколько управленческих тренингов. В общем, чувствовал себя очень крутым управленцем. Но это меня не спасло.

Управление ремонтом квартиры требует немного других навыков, тем более когда тебе противостоит опытный прораб. Мой прораб в самом начале сотрудничества применил переговорный инструмент “Формула нужды”, чем и обеспечил себе однозначную и безоговорочную победу.

Сам по себе инструмент достаточно часто применяется в переговорах с заказчиками — прежде всего, ими и применяется. Итак, как выглядит Формула нужды:

Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

Идея 28


Используйте варианты по-умолчанию, не заставляя людей выбирать

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

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

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

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



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

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

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

• Минускульные и маюскульные цифры
• Целые числа и десятичные дроби
• Простые дроби
• Буквенные сокращения (тысяча, миллион, миллиард)
• Диапазоны
• Порядковые числительные и числительные в составе сложных слов

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

В продолжение марафонской истории я расскажу, как мы создавали визуализацию. Работа над проектом шла поэтапно: идея, дизайн, реализация и наполнение данными.

Идея

Идея показать результаты забега пришла ко мне после участия в «Весеннем громе». Скучные официальные таблицы никак не отражали настроение забега, при этом данные были в открытом доступе — сложные и интересные. Лаборатория только открылась, и в качестве тестового задания для вакансии дизайнера я выбрала задачу о визуализации результатов «Весеннего грома». Из десятка вариантов мне больше всего понравилась идея Сергея Долинина svetosil — показать распределение участников в момент первого финиша:



Мы взяли за основую эту идею и оживили её временным слайдером. Визуализация марафона стала первым проектом Серёжи в лаборатории.

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

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

Одна из главных проблем руководителя — это получение актуальной информации о ходе проектов, за результаты которых он отвечает. По моей практике, до внедрения PPM руководители тратят очень много времени просто на то, чтобы проверить, что всё везде идёт по плану. Грубо говоря, 60% рабочего времени может уходить просто на то, чтобы понять, что все справляются, и вмешиваться не надо. С другой стороны, после внедрения PPM всю эту работу делать уже не надо – она делается автоматически системой. А вам только приходят алерты для ситуаций, в которых требуется внимание. Получается удобный и очень практичный инструмент управления по исключениям.

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

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

Цель текста в информационном стиле — донести информацию до читателя. Информационный стиль: лаконичный, однозначный, точный и объективный. В информационных текстах нет лишних слов, эмоций, личного мнения. Они читаются легко и быстро.

Максим вводит понятие стоп-слов. Стоп-слова не характерны для текстов в информационном стиле и если вы встретили его — задумайтесь и перефразируйте это место. Стоп-слова это «кстати», междометия, модальные глаголы, отглагольные существительные и другие, всего около 100.

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

Доброго времени суток, уважаемые хабравчане. Не так уж давно, для того чтобы сделать что-то «округленное» с нефиксированной высотой приходилось создавать таблицу и крайним ячейкам в бэкграунд задавать нарезанные углы. Вообще любое «непрямоугольное» могло быть только графическим изображением. Сейчас же современные стандарты CSS позволяют создавать весьма интересные вещи. Но все нетипичные фигуры в большинстве своем дозволено сделать благодаря псевдо-селекторам :before и :after. Даже существуют некоторые «паттерны» для этого. А в недалеком будущем появится возможность задавать любые формы для элементов. С приходом CSS Masking я бы сказал наступит веб-дизайнерская сингулярность — веб-дизайн сможет быть любым. Единственное ограничение — это предел фантазии дизайнера. Но не будем о будущем. Все же я предлагаю вдохновиться прекрасным настоящим. В этом посте я собрал несколько крутых CSS реализаций. В некоторых из них спрятаны полезные техники, а в других любовь к CSS творчеству авторов этих подделок.

Не для таких же как и я каскадных зануд хочу добавить, что CSS изобретения могут быть и коммерчески выгодными. Только присутствие в CSSAWARDS, СSSWINNER, CSSREEL или CSSDESIGNAWARDS будет неплохой рекламой.

Таймер на чистом CSS

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

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

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

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

Лекция рассчитана на старшеклассников – студентов Малого ШАДа, но и взрослые смогут почерпнуть из нее много полезного.



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

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

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

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

2. Ориентируйтесь на устройство при создании приложений: учтите не только размер экрана, но и где и когда устройство используется. Больше всего iPad используется для развлечений между 8-11 часами вечера, перед сном, тогда как iPhone — в очереди на автобус или в кофейне. Учтите различные сценарии использования при разработке приложений – включая и то, как далеко устройство расположено от лица пользователя.

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

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

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

За остальными 45-ю — добро пожаловать подкат.