Аннотация: Большинство современных мобильных устройств имеют сенсорные дисплеи. Между традиционным оконным и тачевым интерфейсами существует огромная разница. Разработка удобного интерфейса для мобильных приложений является довольно сложной проблемой. Основной целью лекции является рассмотрение основ разработки интерфейсов мобильных приложений.
В лекции рассказывается об особенностях визуального дизайна интерфейсов, строительных блоках и элементах управления. Приведены рекомендации по проектированию GUI под Android, а также имеется большое количество разнообразных примеров. В конце приведен список дополнительных источников. Описанные принципы помогут при разработке удобных пользовательских интерфейсов для мобильных приложений. Лекция может быть использована как часть курса или же отдельно от него для лучшего понимания особенностей интерфейса мобильных приложений.
Ключевые слова: play, дизайн, пользователь, интерфейс, элементы управления, Windows
Для подготовки данной лекции в качестве основного источника информации была использована книга «Алан Купер об интерфейсе»[11], однако задекларированные в ней принципы были переработаны в контексте программирования для мобильных устройств, а примеры заменены на более подходящие в рамках данного курса. Скриншоты приложений взяты из магазина приложений Google Play или сделаны самостоятельно с использованием смартфона Мегафон SP-A20i Mint на платформе Intel Medfield.
Как написать пользовательский сценарий для интерфейса сайта или приложения
Презентацию к данной лекции можно скачать здесь.
5.1 Визуальный дизайн интерфейсов
Силы, вложенные в разработку модели поведения программного продукта, будут потрачены впустую, если вы не сумеете должным образом донести до пользователей принципы этого поведения. В случае мобильных продуктов это делается визуальными средствами — путем отображения объектов на дисплее (в некоторых случаях целесообразно использовать тактильные ощущения от нажатия).
Визуальный дизайн интерфейсов — очень нужная и уникальная дисциплина, которую следует применять в сочетании с проектированием взаимодействия и промышленным дизайном. Она способна серьезно повлиять на эффективность и привлекательность продукта, но для полной реализации этого потенциала нужно не откладывать визуальный дизайн на потом, а сделать его одним из основных инструментов удовлетворения потребностей пользователей и бизнеса.
5.1.1 Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины дизайна
Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами, однако их деятельность служит различным целям. Цель художника — создать объект, взгляд на который вызывает эстетический отклик. Изобразительное искусство — способ самовыражения художника. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.
Дизайнеры создают объекты, которыми будут пользоваться другие люди. Если говорить о дизайнерах визуальных интерфейсов, то они ищут наилучшее представление, доносящее информацию о поведении программы, в проектировании которой они принимают участие. Придерживаясь целеориентированного подхода, они должны стремиться представлять поведение и информацию в понятном и полезном виде, который поддерживает маркетинговые цели организации и эмоциональные цели персонажей. Разумеется, визуальный дизайн пользовательских интерфейсов не исключает эстетических соображений, но такие соображения не должны выходить за рамки функционального каркаса.
Лекция 5. Проектирование пользовательских интерфейсов
5.1.2 Графический дизайн и пользовательские интерфейсы
Графические дизайнеры обычно очень хорошо разбираются в визуальных аспектах и хуже представляют себе понятия, лежащие в основе поведения программного продукта и взаимодействия с ним. Они способны создавать красивую и адекватную внешность интерфейсов, а кроме того — привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, композиция, которые являются атрибутами бренда, во вторую очередь — прозрачность и понятность информации и лишь затем — передача информации о поведении посредством ожидаемого назначения.
Дизайнерам визуальной части интерфейса необходимы некоторые навыки, которые присущи графическим дизайнерам, но они должны еще обладать глубоким пониманием и правильным восприятием роли поведения. Их усилия в значительной степени сосредоточены на организационных аспектах проектирования. В центре их внимания находится соответствие между визуальной структурой интерфейса с одной стороны и логической структурой пользовательской ментальной модели и поведения программы — с другой. Кроме того, их заботит вопрос о том, как сообщать пользователю о состояниях программы и что делать с когнитивными аспектами пользовательского восприятия функций.
5.1.3 Визуальный информационный дизайн
Информационные дизайнеры работают над визуализацией данных, содержимого и средств навигации. Усилия информационного дизайнера направлены на то, чтобы представить данные в форме, способствующей их верному истолкованию. Результат достигается через управление визуальной иерархией при помощи таких средств, как цвет, форма, расположение и масштаб. Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации.
Чтобы создавать привлекательные и удобные пользовательские интерфейсы, дизайнер интерфейсов должен владеть базовыми визуальными навыками — пониманием цвета, типографики, формы и композиции — и знать, как их можно эффективно применять для передачи поведения и представления информации, для создания настроения и стимулирования физиологических реакций. Дизайнеру интерфейса также требуется глубокое понимание принципов взаимодействия и идиом интерфейса, определяющих поведение продукта.
5.2 Строительные блоки визуального дизайна интерфейсов
Дизайн интерфейсов сводится к вопросу о том, как оформить и расположить визуальные элементы таким образом, чтобы внятно отразить поведение и представить информацию. Каждый элемент визуальной композиции имеет ряд свойств, и сочетание этих свойств придает элементу смысл. Пользователь получает возможность разобраться в интерфейсе благодаря различным способам приложения этих свойств к каждому из элементов интерфейса. В тех случаях, когда два объекта обладают общими свойствами, пользователь предположит, что эти объекты связаны или похожи. Когда пользователи видят, что свойства отличаются, они предполагают, что объекты не связаны.
Создавая пользовательский интерфейс , проанализируйте перечисленные ниже визуальные свойства каждого элемента или группы элементов. Чтобы создать полезный и привлекательный пользовательский интерфейс , следует тщательно поработать с каждым из этих свойств.
5.2.1 Форма
Форма — главный признак сущности объекта для человека. Мы узнаем объекты по контурам. Если мы увидим на картинке синий ананас, мы его сразу опознаем, потому что мы помним его форму. И лишь потом мы удивимся странному цвету (см. рис. 5.1).
При этом различение форм требует большей концентрация внимания, чем анализ цвета или размера. Поэтому форма — не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя.
Рис. 5.1. В первую очередь мы видим ананас, а уже потом начинаем задумываться, почему он синий
5.2.2 Размер
Более крупные элементы привлекают больше внимания, особенно если они значительно превосходят размерами окружающие элементы. Люди автоматически упорядочивают объекты по размеру и склонны оценивать их по размеру; если у нас есть текст в четырех размерах, предполагается, что относительная важность текста растет вместе с размером и что полужирный текст более важен, чем текст с нормальным начертанием. Таким образом, размер — полезное свойство для обозначения информационных иерархий.
5.2.3 Цвет
Цветовые различия быстро привлекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет — отрицательные результаты, а черный — положительные.
Цвета приобретают смыслы и благодаря социальным контекстам, в которых проходит наше взросление. Например, белый цвет на Западе ассоциируется с чистотой и миром, а в Азии и арабских странах — с похоронами и смертью. При этом цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным способом передачи информации, поскольку цветовая слепота встречается довольно часто.
Применяйте цвет с умом. Чтобы создать эффективную визуальную систему, позволяющую пользователю выявлять сходства и различия объектов, используйте ограниченный набор цветов — эффект радуги перегружает восприятие пользователя и ограничивает возможности по передаче ему информации.
Выбор цветовой палитры для программы необходимо проводить очень осторожно. По разным данным, той или иной формой цветовой слепоты страдают до 10% мужчин, и использование, например, красного и зеленого цветов для указания контраста затрудняет работу с приложением для этих людей.
5.2.4 Яркость
Понятия темного и светлого обретают смысл преимущественно в контексте яркости фона. На темном фоне темный текст почти не виден, тогда как на светлом он будет резко выделяться. Контрастность люди воспринимают легко и быстро, так что значение яркости может стать хорошим инструментом привлечения внимания к тем элементам, которые требуется подчеркнуть. Значение яркости — также упорядоченная переменная, например, более темные (с более низкой яркостью) цвета на карте легко интерпретируются: они обозначают большие глубины или большие значения других параметров.
5.2.5 Направление
Направление полезно, когда требуется передавать информацию об ориентации (вверх или вниз, вперед или назад). Помните, что восприятие направления может быть затруднено в случае некоторых форм и при малых размерах объектов, поэтому ее лучше использовать в качестве вторичного признака. Так, если требуется показать, что рынок акций пошел вниз, можно использовать направленную вниз стрелку красного цвета.
5.2.6 Текстура
Разумеется, изображенные на экране элементы не обладают настоящей текстурой, но способны создавать ее видимость. Текстура редко бывает полезна для передачи различий или привлечения внимания, поскольку требует значительной концентрации на деталях. И тем не менее текстура может быть важной подсказкой. Засечки и выпуклости на элементах пользовательского интерфейса обычно указывают, что элемент можно перетаскивать, а фаски или тени у кнопки усиливают ощущение, что ее можно нажать.
5.2.7 Расположение
Расположение — это переменная, упорядоченная и выражаемая количественно, а значит, полезная для передачи иерархии. Расположение также может служить средством создания пространственных отношений между объектами на экране и объектами реального мира (например, небо в верхней половине, земля в нижней).
Расположение элементов мобильного приложения очень сильно влияет на удобство использования и зависит от того, как пользователь будет держать устройство (см. рис. 5.2). Подробнее об этом будет рассказано в продолжении данного курса.
Источник: intuit.ru
Разработка интерфейсов. Проектирование графического интерфейса пользователя
Проектирование — это возможность за короткий срок минимальным набором средств выяснить, насколько эффективно работает то или иное решение, или возможность его найти. Оно позволяет понять, правильный ли продукт создается, будет ли он полезен клиентам и как сделать его лучше. Но за любым проектированием должны стоять аналитика и дизайн.
С чего начинается проектирование
Разработка пользовательского интерфейса начинается с вопроса о том, для чего он предназначен и кто им будет управлять. Хороший дизайнер всегда критически смотрит на окружающую его действительность и делает что-то не просто для процесса, а вдумчиво, по какой-то причине. Правильная разработка интерфейсов — это процесс поиска решений для задач пользователя. Его опыт взаимодействия (UX) влияет на принятие решения о покупке или совершении другого конверсионного действия и может заставить отказаться даже от продукта высокого качества. Интерфейс также решает и задачи бизнеса, потому что от того, насколько им удобно пользоваться клиентам, зависит прибыль компании.
Пирамида потребностей продукта
Дизайнер Максим Десятых предложил модель важных составляющих любого продукта вне зависимости от того, для кого тот предназначен. Он назвал ее «Пирамидой потребностей продукта». Она может использоваться при разработке пользовательского интерфейса. В основе этой модели самым важным критерием оценки является работоспособность. Если продукт не работает, каким бы он ни был привлекательным, он не будет иметь успеха.
На второй ступени пирамиды находится целесообразность. Если продукт работает, он должен для чего-то использоваться и решать задачи пользователя и бизнеса, а также быть функциональным. То есть если у аналогичных продуктов на рынке есть какие-то функции, а у разрабатываемого — нет, он станет убыточным.
Следующая ступень пирамиды потребностей продукта — производительность, скорость работы по сравнению с конкурентами. Если она меньше, чем у конкурентов, продуктом будут пользоваться с меньшей охотой. На вершине находится эстетика, так как привлекательный, но не функционирующий сайт или приложение не заинтересуют потребителя.
Пользовательские истории и сценарии
При разработке графических интерфейсов используются понятия пользовательской истории и пользовательского сценария. Первый термин обозначает способ описания требований к проектируемому продукту в виде нескольких предложений. Второй — детальное описание возможных вариантов поведения пользователя при взаимодействии с интерфейсом.
Они нужны для того, чтобы создать правильный продукт. Например, при проектировании формы на сайте дизайнер должен понимать, сколько в ней должно быть полей, что будет достаточным, а что — избыточным. Для этого и нужен пользовательский сценарий. Пример хорошего варианта — несколько строк с подробным описанием ожидаемых действий пользователя и различными реакциями на них элементов интерфейса. Но важно иметь в виду, что записать все пользовательские сценарии до запуска продукта не получится.
Разработка управляемого интерфейса
Возможность самостоятельно менять интерфейс под нужды пользователя существует в продуктах компании «1С». Например, в системе «1С:Предприятия 8.2», используя встроенные средства разработки, администратор может программировать формы, оптимизировать взаимодействие между клиентской и серверной частью и дорабатывать платформу. Прикладные решения доступны не только в локальной сети, но и через интернет, если применять низкоскоростные каналы связи.
Разработка интерфейса в «1С» происходит при помощи встроенного языка, благодаря которому пользователь может динамически перестраивать его части и создавать собственные алгоритмы для обработки данных. Структура определяется набором команд, расположенных в определенной последовательности. В системе нет ограничений по количеству уровней их вложенности. В процессе разработки интерфейса в «1С 8.3» существует механизм настройки программы в зависимости от прав доступа пользователя и его принадлежности к команде. Администратор может настраивать права пользователя и видимость определенных элементов для различных групп, а сам пользователь имеет доступ к дополнительным настройкам при наличии разрешения от администратора.
Психофизиология восприятия интерфейсов
В процессе проектирования и разработки интерфейсов важно хорошо разбираться в психофизиологии человеческого восприятия. От этих знаний зависит качество будущего продукта. В настоящее время популярность набирает так называемая энергетическая теория, в которой говорится о том, что мозг стремится максимально экономить собственные ресурсы.
Он питается углеводами высокой очистки, подготовленные особым образом. Только такие углеводы могут проникать в мозг и питать его. Этот ресурс очень дорогой и ценный, поэтому энергия не должна растрачиваться впустую. Когда есть возможность не активировать какие-то нейроны, мозг старается не делать этого.
Поэтому в процессе решения задачи находится наименее энергозатратное решение. Если мозг удачно с ней справился, выделяется гормон удовлетворения — дофамин. Это важно учитывать при разработке интерфейсов.
Магические числа 7±2 и 4±1
В 20-х годах прошлого столетия в лаборатории Белла ученым-психологом Джорджем Миллером был проведен эксперимент, в процессе которого группы людей решали определенные задачи, используя различное количество объектов. В итоге выяснилось, что чем меньше применяется объектов, тем эффективнее решается задача. Изучив результаты исследования, Миллер вывел правило, что 7±2 объекта — это максимальное количество, которое может вместить кратковременная память человека. Больших чисел мозг начинает избегать для экономии ресурсов. Не так давно появилось новое исследование, где говорится о том, что объектов должно быть не 7±2, а 4±1.
Разница в обработке объектов мозгом
Но существует разница в скорости обработки информации при работе с различными объектами. Более простые обрабатываются быстрее, чем сложные. Задачи с числами решаются быстрее. На втором месте по скорости обработки — цвета, на третьем — буквы, на четвертом — геометрические формы. Многое также зависит от мотивации.
Если результат стоит того, чтобы приложить усилия, мозг более охотно решает задачу. При несоблюдении правила 7±2 в процессе разработки интерфейса пользователь теряется в обилии элементов и не знает, какие действия выполнять первыми. Он может отказаться решать слишком сложную задачу и покинуть сайт или приложение.
Важность применения правила 4±1
Пользователю приходится решать много задач в повседневной жизни, поэтому интерфейс программы или сайта не должен вызывать у него трудностей. Все нужно выстраивать предсказуемо, логично и просто. При разработке программных интерфейсов необходимо учитывать ресурс человеческого мозга и не заставлять его тратить энергию на ненужные действия. Правильная информационная архитектура и таксономия, когда пункты меню сгруппированы понятным образом, помогают пользователю ориентироваться и находить искомое.
Разработчику нужно ставить перед ним задачи, для решения которых достаточно оперировать малым количеством объектов, после чего можно двигаться дальше. Когда пользователь смотрит на страницу, он вычленяет примерно 5 объектов, с которыми впоследствии взаимодействует. Из них он выбирает тот, что быстро приведет его к цели. Работая с объектом, он решает задачу и двигается дальше.
В результате его энергия будет сэкономлена, задача решена и пользователь останется доволен, получив приятный опыт взаимодействия с продуктом. Потому применение правила 4±1 делает интерфейс лучше.
Использование восприятия цвета и размера
У человеческого восприятия есть еще несколько важных особенностей, которые используются при создании интерфейсов. Например, принцип контраста позволяет выделять значимые объекты, делая их более четкими и яркими. Контраст объема заставляет смотреть на более крупный объект.
Выделенная цветом кнопка большого размера привлекает к себе внимание быстрее, чем маленькая и невзрачная. Противоположным образом оформляются кнопки с нежелательными действиями, например, с отказом от подписки. Для обозначения важного используется размытие фона за ним и воздушная перспектива, что позволяет управлять фокусом пользователя и обращать внимание на конкретный объект.
Особенности восприятия цветов также используется в разработке интерфейсов программ и приложений. Например, красный для человека означает опасность. Поэтому различные предупреждающие кнопки и знаки, обозначающие действия, которые нельзя отменить, окрашены в этот цвет.
Желтый используется для привлечения внимания, зеленый и оранжевый ассоциируются с чем-то безопасным и природным. Но если среди пользователей большой процент дальтоников, использовать цветовые контрасты следует с осторожностью. Один из способов направить взгляд в определенную точку — добавить изображение человеческого лица. Люди с детства приучены распознавать лица и обращать на них внимание, потому всегда реагируют на такую картинку.
Изображение и текст
В процессе чтения активируется несколько обширных зон мозга, ответственных за распознавание, но для восприятия изображения усилий требуется значительно меньше. Поэтому разработчики интерфейсов стараются заменять текст картинками или пиктограммами. Интерфейсы разработки приложений часто сами состоят из иконок и других визуальных элементов. Нужную последовательность считывания информации пользователями можно задавать при помощи правильно подобранных изображений. Но с пиктограммами есть проблема — не каждый человек может расшифровать их значение верно, без процесса обучения.
Например, иконка с дискетой, означающая сохранение изменений, до сих пор используется в некоторых программах, но чаще стало применяться изображение облака или облака со стрелкой. Поэтому на первой итерации продукта к новым пиктограммам нужно делать подпись, которая будет разъяснять пользователю, какое действие за ними последует. Затем для пользователей, не сумевших обучиться на первом этапе, в новой версии продукта добавляется подпись, но меньшего размера. В конечном продукте, когда иконка стала привычной, подпись можно убрать. Такие значки экономят место и быстрее распознаются пользователями, что особенно важно для мобильных приложений и адаптивных сайтов.
Читаемость текста
Правила контрастности важны не только для графических элементов, но и для текстового контента. Например, в программах для чтения книг есть специальный ночной режим, позволяющий сделать фон черным, а текст — белым. Благодаря этому при вечернем освещении глаза меньше устают от яркого экрана. Тот же принцип используют программисты в процессе написания кода.
При цветовом кодировании глаз распознает больше оттенков на темном фоне, особенно красного и фиолетового спектра. Экономить ресурс мозга и быстрее читать текст помогает правильная типографика. Ранее считалось, что человек лучше воспринимает шрифты с засечками, но, согласно новым исследованиям, сейчас читают быстрее привычный шрифт, неважно, с засечками он или без.
После разработки концепции, оформления и создания прототипа завершающим этапом проектирования интерфейса является тестирование. После удачного прохождения тестов проект запускается.
Источник: fb.ru
Подходы, методы и инструменты UX/UI для разработки эффективных интерфейсов на 1С
Сегодня сложно найти человека, который не использует хотя бы какие-нибудь веб-сервисы или мобильные приложения. И когда пользователь, «избалованный» дружелюбием интерфейсов таких сервисов, открывает продукт на 1С, у него возникают определенные вопросы.
Даже те, кто знаком с 1С «исторически» – бухгалтеры, финансисты, кадровики, сегодня имеют большой пользовательский опыт использования мобильных приложений, интерфейс которых максимально соответствует понятию юзабилити и сильно отличается от того, что они видят в 1С. Поэтому утверждать, что пользователи «нас не бросят» с каждым днем все рискованнее: недовольство будет расти, а руководители, устав от претензий, для решения отдельных задач все чаще будут выбирать не 1С.
Приглашаем на
бесплатный вебинар!
18 июля в 11:00 мск
Неутешительная статистика
Вопрос интерфейса в сообществе 1С стоит остро, и виноваты в этом сами инженеры-разработчики. 1С-ники надеялись и до сих пор продолжают надеяться на преимущества 1С: на PR и маркетинг со стороны фирмы 1С, на то, что решения популярны (читай, незаменимы) во многих сферах, а также на сильную платформу и функциональность конфигураций. Между тем, статистика уже сегодня не утешительная.
Например, если 1С:Бухгалтерия занимает долю в 97-98% рынка (по данным ФАС и Gartner), то доля отраслевых решений 1С для оперативного учета – 5-25%.
Помимо этого существует целый класс функциональных задач, где 1С проигрывает как система: в области CRM и систем рекрутинга (ATS), в LegalTech для судебной работы юристов, в BPM (даже несмотря на то, что 1С:Документооборот сегодня – одна из флагманских систем 1С, она проигрывает конкурентом в юзабельности), и т.д.
Даже в уже упомянутой области регламентированного учета, где 1С традиционно является лидером, появились амбициозные сервисы-конкуренты, способные «откусить» от доли рынка 1С. Таким примером могут служить сервисы самообслуживания «Мое дело», «Контур.Эльба», «Небо», «Главбух: Зарплата и кадры», с которыми 1С:Бухгалтерия конкурирует и доля рынка которых составляет несколько миллиардов рублей. Здесь же можно упомянуть и область управления финансами для малого бизнеса: в последние годы появилось немало качественных сервисов, которые безусловно выигрывают в части интерфейса.
В каких условиях интерфейсы 1С уступают конкурентам?
- При ограниченной функциональности;
- Нет формализованной области автоматизации;
- Почти не используются гриды/таблицы;
- При работе на мобильных устройствах и тачскринах;
- Когда необходима визуализация данных;
- При необходимости выполнения в одном окне большого количества различных операций.
Почему так происходит?
В сфере разработки существует понятие дизайн-систем или гайдлайнов (guideline) – это детально проработанные правила разработки эффективных интерфейсов на определенной платформе непосредственно от разработчиков этой платформы. Они находятся в свободном доступе и серьезно упрощают разработку. Для 1С гайдлайнов нет, но есть разрозненные и к тому же устаревшие материалы на дисках ИТС. Более того, рабочие столы и дашборды в тиражных решениях 1С, производимые самой фирмой, выглядят по-разному, активно используется только поле HTML-докмуента.
В мобильных приложениях от самой 1С активно используют объект «декорация», как способ обхода интерфейсных ограничений. Заказать услуги по прототипированию интерфейса нельзя, инструментов прототипирования нет, поэтому и с привлечением дизайнеров на проект разработки беда. Работа с цветами появилась только в 8.3.14 и только для корпоративного или, как его еще называют, фирменного стиля.
Заграничный опыт: как процесс разработки интерфейса сделать быстрее, проще и дешевле
Объемные, наиболее эффективные гайдлайны у разработчиков платформ, ориентированных на мобильные устройства – Apple и Android. Их популярность связана в том числе и с огромным количеством доступных приложений, разработку которых поощряют сами компании-разработчики.
Если говорить об автоматизации бизнеса, можно привести пример крупнейшей американской компании Salesforce.com, разработавшей и распространяющей платформенное решение класса CRM исключительно «в облаке». Компания предоставляет облачную же систему управления БД и интересующую нас в рамках обсуждаемой темы гайдлайн-систему для самостоятельной разработки приложений. Под нее разработан сайт, выделено финансирование и разработана масса контента для создания эффективного интерфейса на данной платформе:
- UI-киты для программы прототипирования Sketch;
- Виджеты для Axure (также программы прототипирования);
- CSS-стили, дизайн-токены для использования Lightning Component Framework при разработке любых приложений (веб и для мобильных устройств);
- Иконки, наборы цветов для Photoshop, Sketch, IOS.
Такой подход привел компанию к позициям мирового лидерства рынка CRM-систем.
- Повышает скорость и снижает ошибки при вводе данных;
- Дает качество, скорость и простоту анализа данных;
- Позволяет освоить работу с минимумом усилий и в кратчайшие сроки;
- Минимизировать затраты на обучение и поддержку.
И конечно же не будем сбрасывать со счетов эффект первого впечатления. Именно он формирует основные ожидания пользователя относительно удобства работы с системой в будущем.
Почему эта проблема актуальна для нашей компании
Для разработчиков эффективный интерфейс – это командная строка. Для пользователей эффективный интерфейс – это большая заметная кнопка, которая может решить все проблемы. Отдел внутренней автоматизации группы компании WiseAdvice нашел баланс между этими крайностями, поскольку не раз сталкивался с задачей создания интерфейсов на базе платформы 1С, например, в рамках совместных проектов отдела внутренней автоматизации и интернет-маркетинга по разработке личных кабинетов для клиентов мобильных приложений. Также мы разрабатываем линейку продуктов «Юрайт» для автоматизации судебно-претензионной работы с применением современной интерфейс-системой Casepro и свои мобильные приложения.
Далее мы рассмотрим, во что наш опыт вылился.
Как разработать эффективный интерфейс (по этапам)
О создании интерфейса следует подумать до начала разработки, то есть помимо продакт-менеджера в проекте разработки сервисов мобильных приложений с самого начала должен участвовать проектировщик интерфейса, дизайнер и дизайнер-иллюстратор. Все трое могут быть одним человеком, но такой человек на проекте быть должен.
Следующий важный момент – стадии разработки. Ими не следует пренебрегать:
Анализ сценариев работы. Userstories, или JTBD, или язык Gherkin – синтаксис описания не столь важен. Важно то, что нам необходимо придумать, «вжившись в образ» пользователей, какие роли и операции будут ими выполняться, и самое главное – зачем.
В сообществе 1С Userstories часто пренебрегают, поскольку мыслят функциональными требованиями. Но простые действия в рамках этого этапа могут дать нам полное понимание того, как с этим будет работать пользователь.
Предварительно изучив конкурентов (обзоры, отзывы) и «заменителей» (сложившиеся/альтернативные способы решения задачи), а также исследовав ЦА (форумы, опросы) на общих функциональных требованиях останавливаться нельзя. Необходимо прописать основные сценарии, ранжировать по частоте и сложности их использования, по уровням квалификации пользователей (опыт работы в 1С) и т.д.
В создании персонажей и ролей помогут ответы на вопросы:
- Как я хочу для ?
- Когда я хочу чтобы ?
Это действия окупятся многократно уже на этапе согласования: снизится число итераций при сдаче работы заказчику, поскольку этот результат будет ему максимально понятен, в отличие от общих функциональных требований.
Прототипирование. Прототипы можно разбить на четыре вида, среди которых нам интересен только один:
- Скетчи – наброски от руки с отсутствием детализации;
- Вайрфреймы характеризуются низкой детализацией. Представляют собой программную группировку содержимого без дизайна;
- Мокапы – оформленные, наглядные, «радующие глаз»;
- Рабочие прототипы. Важнейшее их качество – кликабельность. То есть это полноценный проект интерфейса с необходимым количеством активных окон. Для создания рабочих прототипов мы пользуемся Axure, работа в котором фактически имитирует целевой процесс.
Важный момент: после прототипирования, прежде чем «пилить код», участвующие в Userstory формы стоит показать пользователю (заказчику, менеджеру продукта) – запустить их в окне предварительного просмотра в конфигураторе и попросить пользователя пройти Userstory и зафиксировать, что он будет делать, где он пойдет не по заданному пути, что ему будет не совсем понятно. Записать все это и тщательно проработать. При этом показывать не проработанную форму неправильно – следует сразу использовать максимально реалистичное оформление.
Дизайн, анимация и иллюстрация. Хотя довольно сложно описать данный этап в отрыве от предыдущего, в зависимости от вида прототипа (их 4), от состава команды и уровня задачи, «дизайнерить» можно или в программе прототипирования, или в графическом редакторе. Если говорить точнее, то и там, и там, поскольку в понятие «дизайн» входит и работа с компоновкой (сетка, якорные объекты баланс композиции), которая выполняется средствами прототипирования, и работа со шрифтами, цветами, иллюстрациями (фото, картинки, иконки, видео) и анимацией (акценты привлекающие внимание), которую выполняют уже в графических редакторах.
Проработка деталей
Рабочие столы пользователей. Знакомство с интерфейсом, то есть все рабочие операции по определенной роли в Userstory, начинаются с входа в систему, поэтому проработке рабочего стола следует уделить особое внимание. Кажется, что пользователи в состоянии настроить рабочий стол «под себя», но большинство из них по привычке работают с тем, что «было всегда», даже не задумываясь, как усовершенствовать рабочее пространство. Важно подумать об этом за них, потому что, как уже говорилось выше, – первое впечатление бесценно.
Формы списков. Преднастройка для роли быстрых группировок, отборов и фильтров. Обратите особое внимание на условное оформление, быстрый выбор периодов и поиск, потому что эти компоненты из списков способны сделать отчеты, а также их используют чаще других элементов.
Отчеты. Для ролей необходимо продумать варианты отчетов, группировки и сортировки, опять же, возможность быстрого отбора, фильтры и выбор периодов.
Иконки. Чтобы облегчить восприятие текста и информации, а не сбивать пользователя, иконка должна быть очевидно считываемой, визуально отражать описанное действие, или она не нужна. При этом придерживаемся единого стиля.
Чем заняться на досуге разработчику
Первое, чем следует заняться на пути разработки эффективного интерфейса в среде «1С:Предприятие» – в отсутствии гайдлайнов от 1С создавать свои чек-листы и стандарты, то есть свои элементы дизайн-системы на основе материалов от 1С. Список элементов гайдлайнов 1С на диске ИТС хоть и не велик, но на него все же стоит ориентироваться (обратите особое внимание на то, что выделено жирным шрифтом):
- Система стандартов и методик разработки конфигураций;
- Проектирование интерфейсов для 8.3 (пока что объем в 5-10 раз меньше, чем для 8.2);
- Компоновка форм;
- Подсказки на форме;
- Проектирование интерфейсов для 8.2 (мало примеров в картинках и не 8.3);
- Чек-лист проверки интерфейса (общие рекомендации);
- Элементы стиля;
- Сообщения пользователю;
- Руководство по стилю для типовых конфигураций на платформе 1С:Предприятие 8.2;
- Библиотека картинок для типовых конфигураций на платформе 1С:Предприятие 8.2;
- П.2.8 требований к сертификации 1С:Совместимо (сообщения, предупреждения, уведомления);
- Отдельные заметки из «Зазеркалья» (тег «UI»).
Далее следует вести или хотя бы поддерживать словари терминов и определений при автоматизации не формализованных областей, чтобы в различных объектах конфигурации элементы назывались одинаково. Работаем над цветами и оформлением иконок, ориентируясь на стили 1С, привлекаем дизайнеров. Это облегчит жизнь и разработчикам, и будущим пользователям.
А что же делать с интерфейсами мобильных приложений?
Разработка интерфейса мобильных приложений еще более проблемный момент, поскольку интерфейс для мобильного приложения – важнейший компонент, но добиться от него «эффективности» сложнее, потому что:
- Меньше места на экране и функции тач-скрина;
- Разрабатываются фактически с нуля, нет «преемственности»;
- Используются не «знатоками» (например, бухгалтерами);
- Повышенная конкуренция с «красивыми» приложениями;
- Технически сложная разработки через прототипирование.