Архив за месяц: Февраль 2015

Основные этапы проектирования интерфейсов

Дизайн в бизнесе

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

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

Разработка интерфейсов программного продукта, будь то интернет-магазин, веб-сайт или мобильное приложение начинается с постановки задачи в виде функциональных требований. Функциональные требования следует отличать от технического задания. На мой взгляд, они важнее, потому как документ, описывающий функциональные требования, сообщает что именно мы создаем, зачем, какие сервис будет иметь конкурентные преимущества, на какую аудиторию он рассчитан, что мы автоматизируем и какими техническими решениями. Вторым этапом функциональные требования следует обсудить с программистами, которые будут сервис создавать, чтобы понять возможность реализации функционала и способ каким сервис будет создан. Если на этом этапе не понимать таки требований как программная среда или размеры экранных форм, то, впоследствии, придется многое переделывать как в дизайне так и в разработке. После того, как получена ясность о том, что  и какими программными средствами мы создаем, можно приступать к дизайну. Первый этап создания дизайна это прототипирование интерфейса, в ходе которого появляется схематическое изображение экранных форм интерфейса. Вторым этапом, я предлагаю делать дизайн концепт — т.е. эскизы, по которым заказчик понимает, какая цветовая гамма и стилистика элементов интерфейса будет использована. Лишь на третьем этапе начинается дизайн в том смысле, в каком мы привыкли его понимать.

Рассмотрим проект, по которому вместе с дизайном делалось и интерфейсное проектирование. Проект создания интернет-магазина «Сила жизни», ориентированного а продажу товаров для детей больных ДЦП. В данном проекте представлено много дизайн-концептов, но по каким критериям выбирать  лучший?

Есть сильные концепты, акцентирующие эмоциональную составляющую, например работа дизайнера Бомко Илоны 

или дизайнера Губаренко Максима 

2

А вот работа с качественно проработанным торговым функционалом Чичиной Надежды

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

4

Каковы критерии выбора качества работы кроме интуитивного не понятно. Потому как из-за очень широко описанных требований каждый исполнитель выбирал для себя то, что считал главным. Наличие прототипа хотя бы двух страниц — главной и карточки товара, с описанным функционалом, позволило бы намного объективнее провести конкурс на дизайн. Впоследствии, перед заказчиком этого проекта встанет вопрос о нужности блока социальных сетей, расположении форм обратной связи и др.  Этот и другие вопросы станут предметом как допзатрат на работу дизайнера, так и предметом внутренних согласований в компании заказчика.

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

Качественный «федеральный дизайн» с использованием цветов триколора дизайнера Москвич Елены

5

 

или демократичный лаконичный дизайн Поздеева Алексея в несколько западном стиле

6

 

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

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

 

Юзабилити собственными силами, рекомендации для малого бизнеса.

Дизайн в бизнесе
        Услуга юзабилити-проектирования интерфейсов уже не является экзотическим дополнением к проекту создания программного обеспечения. Очевидно, что чем удобнее будет интернет-магазин, тем больше покупок в нем будет совершено, а чем удобнее интерфейсы предоставляемого сервиса, — тем больше людей им воспользуется.
                В классическом варианте, юзабилити-проектирование выполняют профессиональные юзабилити-студии. Первым этапом они проводят юзабилити-тестирование прототипа будущей системы. Предполагается, что пользователи работают с системой в специальной студии, звукоизолированной, где ничто не отвлекает их от работы с системой. Далее, поведение пользователей анализируется, появляется понимание, где интерфейсы не соответствуют ожиданиям пользователя, где он останавливается в непонимании, какое дальнейшее действие предпринять. Дополнительно, возможно использование приборов, следящих за движением глаз пользователя, но я описываю только самые простые этапы тестирования. На выходе заказчик получает отчет с рекомендациями по внесению изменений в интерфейс.
                Юзабилити-проектирование решает ряд вопросов между заказчиком и исполнителем, когда есть разногласия по вопросам организации интерфейсов. Так же, оно может быть полезным инструментом руководителю проекта, который, представляя экранные формы на согласование, сталкивается с разными мнениями. Часто бывает так, что появляются пожелания от согласующих коллег, которые могут нарушить логику интерфейса. В этом случае юзабилити-тестирование помогает снять противоречия и объективно понять, что в интерфейсе спроектировано хорошо, а что плохо. Предметом дебатов между заказчиком и исполнителем является дизайн. Но цветовой акцент, поставленный не в том месте, может качественно повлиять на успешность решения. Например, невинное желание собственника будущего интернет-магазина сделать иконки поярче, может отвлечь внимание пользователя от кнопки «Купить» — главной кнопки магазина и от карточки товара.
              Однако, такая услуга по юзабилити-проектированию профессиональной студии стоит не дешево, а небольшие предприятия, желающие запустить сервис, не могут себе позволить дополнительные затраты. Как провести юзабилити-тестирование своими силами?
            Вы можете собрать аудиторию, дав объявление в социальной сети или ресурсе, где люди ищут подработку. За 300 рублей, многие с удовольствием протестируют ваш продукт независимым взглядом, а за 500 приедут в офис, таким образом вы сможете понаблюдать, в какие моменты пользователи испытывают затруднения. Вы получите качественный шаг вперед, если ваш продукт протестируют около 30 человек, а если хотя бы половина пользователей будут из вашей целевой аудитории то, полученные результаты позволят вам сделать сервис лучше. Работу пользователей с сервисом или интерактивным прототипом лучше записать при помощи программных средств, пишущих видео с монитора (например, Camtasia). Просматривая записи, вы поймете где поведение пользователя не соответствует вашим ожиданиям. Разработайте анкету с вопросами и попросите людей на них ответить, — вы получите независимую оценку и мнения. Наконец, полученные данные станут инструментом разрешения противоречий заказчика и исполнителя, потому как независимый взгляд многих людей позволяет определиться со способом реализации интерфейса.
D1-87-D0-B5-D1-80-D0-BD-D0-B0-D1-8F

Служебные интерфейсы, как они влияют на успех внедрения

Дизайн в бизнесе
             При составлении технического задания и проектировании интерфейсов основное внимание уделяется внешней части системы. Большинство аналитических обзоров платформ для интернет торговли, дает обзор интерфейсов клиентской части и функций интернет-магазина. Описания других систем аналогично делают упор на функциональные возможности клиентской части. Удобство работы с администраторской частью традиционно считается второстепенным фактором. На этапе проектирования системы, многие не задумываются о том, что неудобные интерфейсы администрирования приводят к дополнительным затратам на обучение специалистов и ведут к ошибкам в работе с вводимыми данными. Лишь когда система уже внедрена, обнаруживается, что интерфейс администрирования имеет нужный функционал, но использовать его неприятно или неудобно.
                В большинстве случаев, заказчики отдают разработку служебного интерфейса на усмотрение разработчика. На протяжение многих лет разработки интерфейсов, я по-разному реализовывала служебные модули программы, реализуя в них творческие замыслы. Заказчик хотел функционал системы, дизайн и конструкция интерфейсов, с которыми будут работать многие сотрудники, — интереса не вызывал. Имея свободу творчества, разрабатывались разные варианты, имеющие ряд плюсов и минусов. Приведу некоторые из них.
                  Служебный интерфейс а-ля Apple.
                  Стилистика предполагает темный фон, большие кнопки, контрастные цвета кнопок. Предполагается, что сотрудник, который целый день работает с этим инструментом, оценит креативный подход дизайнера. Однако, темный цвет угнетающе действует на сотрудника, у которого стоит задача, например, внести 50 описаний товара, а большие элементы интерфейса заставляют его делать лишний клик при переходе между функциями системы.
Вот конкурс, где предлагается разработать подобный дизайн для служебной системы. Несмотря на то, что система будет использоваться клиентами, она будет служебной, т.е. выполнять довольно широкий функционал и полученные результаты использовать. Соответственно, пользователь, в течение нескольких часов будет работать с контрастным интерфейсом. Если предполагается использование только приложения для планшетных ПК и телефонов, то, наверное, это было бы стильно, но если такие цвета будут в браузерной версии для работы на компьютере, то пользователю придется привыкать и испытывать неудобства.
                     Представлю одну из моих работ в этой стилистике. Было принято решение создать интерфейс служебной программы для силовой структуры в стилистике игры. Это решение базировалось на предположении, что сотрудникам будет интересно использовать программу с красивыми интерфейсами. Игровая стилистика сделает программу привлекательной, внедрение будет эффективнее, использовать программу будут чаще. Однако, на практике оказалось, что сотрудники находятся на работе и интерфейсы, выполненные в игровой стилистике, вызывают непонимание и неприятие.

                       Было очень печально, когда старания, вложенные в разработку таких замечательных элементов не были оценены, а интерфейсы системы было решено заменить на аскетичный вариант.
                       Служебный интерфейс а — ля 1С 
                       Разумеется в программе для бухгалтера с множеством функций и опций уместно наличие пятидесяти иконок и переходов на другие экранные формы. Предполагается, что бухгалтер проходит специальное обучение, в ходе которого он научится разбираться в море иконок и кнопок. Но, если предполагается, что пользователь не будет получать специальную квалификацию и месяцами учиться работе с системой, рекомендуется не перегружать интерфейсы количеством кнопок и переходов, а иконки делать однозначно трактуемыми.
              Вот интерфейс служебной программы, он лаконичен, в нем нет дизайнерских элементов, что делает это сугубо рабочим, никак не вдохновляющим сотрудников к работе с ним. Никаких подсказок, иконок, — все строго. Да, это современный стандарт, но в нем нет «изюминки», а так же элементов, с которыми работать хочется.
                  Выполнив ряд проектов по созданию служебных интерфейсов и выполнив много экспериментальных работ, я сделала ряд выводов, некоторыми из которых сейчас поделюсь.
                Во-первых, удобство служебных интерфейсов влияет на успех бизнеса в целом. Например, Вы можете сделать шикарный интернет-магазин, но сотрудники не будут наполнять его нужным контентом, «забывать» добавить фотографии, наконец, делать работу крайне медленно, если у интернет-магазина будет плохой интерфейс администрирования товара.
                    Предпочтительны светлые оттенки, однако, делать служебный интерфейс излишне блеклым и сухим не рекомендуется. Людям, которые будут с ним работать, будет приятно видеть цветные элементы, понятные иконки, приятные сервисы, такие, например, как их фотография говорящая о том, что сотрудник вошел в систему. Этот совет актуален для интерфейсов программ для колл-центров и других видов сервисной работы.
                          Вот стилистика, которая, полагаю, идеально подошла бы для служебных программ, выполненная дизайнером PelmeshkOsS
 
redcube

Креативный дизайн или продающий дизайн, ищем компромисс

Дизайн в бизнесе
         Профессионализм в дизайне и других творческих профессиях имеет некую двойственность и специфику. С одной стороны, дизайнер-профессионал действует механистично: понимает, что понравится аудитории, чтобы веб-ресурс был успешным, управляет ожиданиями заказчика, формирует эскизы согласно юзабилити-стандартам. С другой стороны, нами движет желание сделать что-то оригинальное, выделяющее веб-ресурс среди конкурентов. Удачные и яркие проекты, даже при обоюдном желании у заказчика и исполнителя экспериментировать, получаются крайне редко.  
               Почему так происходит? 
              В желании выйти за рамки стандартов, вложить душу и изобретательность, придумать что-то принципиально новое, мы часто получаем интересные концепты. Однако, правила юзабилити сайта и правила построения витрины интернет-магазина диктуют реалии. Поэтому рекомендую брать хорошую, стандартную, соответствующую всем правилам юзабилити задумку и добавляем в нее «изюминки» и оригинальные элементы. 
        Рассмотрим пример — интернет-магазины подарков «Красный куб» и «LEFUTUR». Очевидно, что создавая дизайн интерфейсов магазина, продающего эмоции, — магазина подарков, нестандартное творческое и вдохновляющее решение это требование. 
              Рассмотрим главную страницу интернет-магазина «Красный куб». Очень душевный дизайн, показывающий дружественность, теплоту. Об этом свидетельствует «рукописный» шрифт и миловидные персонажи. Решение нестандартное и действительно творческое. Однако, заходя на этот ресурс, не сразу понятно, что попал в интернет-магазин, — нет товара и цены, а взгляд разбегается между многими сообщениями «рукописным шрифтом». Баланс между творческой и имиджевой главной страницей и функционалом, обеспечивающим продажи, восстанавливается, когда клиент попадает на страницу товаров. 

 

           А магазин «LEFUTUR» нашли менее сложный пусть к эмоциональному и нестандартному торговому решению. В интерфейс, созданный по стандартным правилам, добавлена нестандартная и остроумная классификация товаров. Товарные категории «Человек подвижный», «Человек работающий» и др. дают понять, что мы находимся в удивительном магазине, при этом сразу же видим товары и ценники, т.е. мысль пользователя направляется на покупку. 
               Теперь несколько слов о цветовых оттенках дизайна. Часто заказчик в требованиях указывает, что бренд относится к сегменту премиум плюс и сообщает, что нужен стильный дизайн с намеком на солидность, в темных тонах. И вот тут кроется тонкость! Интернет-магазины и ресурсы, сделанные в темных тонах, ассоциируются с высокой ценовой категорией, соответственно, многие могут уйти с ресурса, не открывая страниц с ценовой политикой. Получается, что очень хороший стильный дизайн в темных тонах и шоколадных оттенках может оттолкнуть часть аудитории, и, пусть даже будет элегантное и стильное решение, но оно не лучшим образом скажется на продажах. 
             Вот пример работы дизайнера mz777. Если рисунок на черном фоне сделать цветным, то будет дорогой технологичный формат. Дизайнер предложил очень стильное решение, но темные оттенки в массовом сегменте, по моему мнению, лучше не применять. Зато такой дизайн отлично подошел бы магазину стильных вещиц для путешествий. 
   


А вот демократичный дизайн пользователя Sanguine. Белый фон и расчет на массовую аудиторию. 

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