Договор о разработке шаблонов дизайна пользовательского интерфейса

Конструктивные шаблоны пользовательского интерфейса для надстроек Office — Office Add-ins

Договор о разработке шаблонов дизайна пользовательского интерфейса

  • 03/19/2019
  • Время чтения: 2 мин

Проектирование пользовательского интерфейса для надстроек Office должно обеспечивать удобство работы для пользователей Office и расширять функциональный набор Office благодаря плавной интеграции в интерфейс Office по умолчанию.Designing the user experience for Office Add-ins should provide a compelling experience for Office users and extend the overall Office experience by fitting seamlessly within the default Office UI.

Наши шаблоны пользовательского интерфейса состоят из компонентов.Our UX patterns are composed of components. Компоненты — это элементы управления, которые помогают клиентам взаимодействовать с элементами программного обеспечения или службы.

Components are controls that help your customers interact with elements of your software or service. Кнопки, элементы навигации и меню — это примеры общих компонентов, которые часто отличаются единым стилем и поведением.

Buttons, navigation, and menus are examples of common components that often have consistent styles and behaviors.

Office UI Fabric обрабатывает компоненты, обеспечивая их полную совместимость с Office.Office UI Fabric renders components that look and behave a part of Office. Воспользуйтесь преимуществами Fabric для легкой интеграции с Office.Take advantage of Fabric to easily integrate with Office.

Если надстройка содержит собственный язык компонентов, не нужно отказываться от него в пользу Fabric.If your add-in has its own preexisting component language, you don't need to discard it in favor of Fabric. Найдите возможности сохранить его, интегрируя надстройку с Office.

Look for opportunities to retain it while integrating with Office. Рассмотрите способы изменения стилистических элементов и удаления конфликтов или примените понятные пользователям стили и поведение.

Consider ways to swap out stylistic elements, remove conflicts, or adopt styles and behaviors that remove user confusion.

Предоставленные шаблоны — это наилучшие решения, основанные на общих сценариях клиентов и исследованиях работы пользователей.The provided patterns are best practice solutions common customer scenarios and user experience research.

Они призваны обеспечить как быструю отправную точку для проектирования и разработки надстроек, так и руководство для достижения баланса между элементами Майкрософт и фирменной символикой.They are meant to provide both a quick entry point to designing and developing add-ins as well as guidance to achieve balance between Microsoft and brand elements.

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

Providing a clean, modern user experience that balances design elements from Microsoft's Fabric design language and the partner's unique brand identity may help increase user retention and adoption of your add-in.

Используйте шаблонные заготовки пользовательского интерфейса для того, чтобы:Use the UX pattern templates to:

  • применять решения в распространенных клиентских сценариях;Apply solutions to common customer scenarios.
  • следовать рекомендациям по оформлению;Apply design best practices.
  • внедрять компоненты и стили Office UI Fabric;Incorporate Office UI Fabric components and styles.
  • создавать надстройки, внешний вид которых согласован со стандартным пользовательским интерфейсом Office;Build add-ins that visually integrate with the default Office UI.
  • формировать и визуализировать пользовательский интерфейс.Ideate and visualize UX.

Начало работыGetting started

Шаблоны организованы по ключевым действиям или функциональным возможностям, которые часто используются в надстройке.The patterns are organized by key actions or experiences that are common in an add-in. Основные группы:The main groups are:

Просмотрите каждую группу, чтобы получить представление о том, как можно создавать свои надстройки с использованием рекомендаций.Browse each grouping to get an idea of how you can design your add-in using best practices.

Примечание

Примеры экранов, демонстрируемые в этой документации, созданы и отображены с разрешением 1366×768.The example screens shown throughout this documentation are designed and displayed at a resolution of 1366×768.

См. такжеSee also

Источник: https://docs.microsoft.com/ru-ru/office/dev/add-ins/design/ux-design-pattern-templates

Дизайн паттерны — принципы выбора шаблонов проектирования

Договор о разработке шаблонов дизайна пользовательского интерфейса

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

Шаблоны проектирования UI – повторяющиеся решения общих проблем пользовательского интерфейса. Они представляют собой готовые решения в дизайне UI, избавляют от необходимости «изобретать колесо» и сокращают время разработки дизайна интерфейса.

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

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

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

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

Преимущества использования шаблонов:

    • Значительная экономия вашего времени и средств, предсказуемая конверсия без A/B тестов
    • Гарантия что размещение элементов на сайте будет понятно, привычно и удобно пользователю
    • Большой выбор готовых шаблонов в библиотеках шаблонов и UI фреймворках, а также возможность сразу увидеть, как будет выглядеть ваш сайт.

Недостатки использования шаблонов:

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

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

Классификация шаблонов по задачам

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

3 уровня организации шаблонов:

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

Шаблоны дизайнов пользовательского интерфейса делятся на следующие категории:

Шаблоны навигации

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

Пример: вкладки, меню.

Социальные шаблоны

Помогают взаимодействовать с другими пользователями онлайн.

Пример: система баллов, доски, отзывы, чаты.

Шаблоны ввода

Обеспечивают взаимодействие с системой путем ввода информации и получения обратной связи.

Пример: поля для загрузки, текстовые поля, выпадающие списки.

Шаблоны подачи контента

Определяют, как подается контент для работы с ним, поиска и быстрого просмотра.

Пример: таблицы, карточки, галереи.

Проверка соответствия конкретного шаблона вашим потребностям включает в себя:

  1. Описание проблемы, связанной с использованием интерфейса, которую нужно решить.
  2. Уточнение ситуаций, при которых возникает эта проблема.
  3. Поиск эргономического принципа, на котором основан шаблон.
  4. Описание сути проблемы, которую можно решить разными способами.
  5. Объяснение, каким образом применение данного шаблона решит проблему и повлияет на удобство пользования сайтом.
  6. Проверку примеров удачного применения шаблона.
  7. Внедрение: как применять шаблон к текущей проблеме.

Как найти необходимые паттерны дизайна на платформах

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

  • UI-patterns.com – популярная база паттернов. Пользоваться ею очень удобно, так как шаблоны дизайна расположены по категориям, а найденные шаблоны можно группировать. Каждый паттерн сопровождается разъяснениями и подобранными вручную наглядными примерами. Также на сайте содержится много полезных статей, которые помогут вам эффективнее использовать шаблоны в ваших проектах.
  • GoodUI – масштабный проект Jakub Linowski. Все паттерны, которые присутствуют на сайте, прошли так называемое A/B-тестирование, призванное выявить, в чем и насколько они эффективны. Пользователям предоставляется доступ к более 100 шаблонов, выбранных на основании 197 тестирований. Приятным бонусом является то, что сайт предлагает 100%-ую гарантию возврата средств, если шаблон не даст вам ожидаемых результатов.
  • Dribble – онлайн-сервис, который объединяет графических дизайнеров, веб-дизайнеров, иллюстраторов. Особенностью сервиса является то, что публиковать работы там могут только получившие инвайт за качественные работы дизайнеры. Чтобы найти нужные шаблоны среди всех выставленных на сайте, воспользуйтесь функцией поиска. На Dribblе есть также продвинутый поиск, но за него придется заплатить. Сервис отдельно выделяет паттерны, получившие больше просмотров или комментариев.
  • Behance – ведущая интернет-платформа для просмотров и публикации творческих работ На Behance удобно просматривать портфолио понравившихся вам дизайнеров, там же есть подборки паттернов, трендов и идей. Для поиска паттернов просто воспользуйтесь фильтрами и поиском. Также на платформе присутствуют шаблоны, разработанные Evergreen.
  • Awwwards – платформа для подбора паттернов для сайтов с необычным и креативным дизайном. Иными словами: если вы видите сайт, непохожий на другие, но при этом удобный и интуитивно понятный, вполне вероятно, что он создан на паттерне из этой платформы. У каждого шаблона здесь есть оценка за несколько категорий: дизайн, удобство, креативность, контент, то, как сайт выглядит на мобильных устройствах. Таким образом вам будет удобно выбрать, ведь помимо внешнего вида, у вас будет дополнительная важная информация о каждом шаблоне.

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

11.05.2019

читайте другие наши статьи.

Источник: https://evergreens.com.ua/ru/articles/ui-patterns.html

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

Договор о разработке шаблонов дизайна пользовательского интерфейса

Перевод статьи «How developers and tech founders can turn their ideas into UI design»

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

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

Задача с точки зрения UI-дизайна

Отправная точка — это не только определение задачи, которую надо решить, но и её понимание с точки зрения ваших клиентов.

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

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

Разработайте собственный алгоритм подхода к дизайну

Сформируйте простой порядок действий для разработки UI-дизайна вашего приложения. Вот некоторые рекомендованные шаги:

  • создание диаграммы пользовательских маршрутов;
  • изучение существующих дизайнерских шаблонов и стилей;
  • создание каркасов;
  • создание макетов.

Диаграмма пользовательских маршрутов

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

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

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

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

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

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

Планирование облегчает реализацию, поэтому всегда делите задачи на более мелкие части.

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

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

Отличным источником информации будет UI Patterns. Это прекрасный ресурс, чтобы ознакомиться с наиболее часто используемыми шаблонами проектирования и способами их применения.

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

Вот ещё несколько отличных ресурсов:

  • UX Screenshots,
  • Laudable Apps,
  • Mobbin Design,
  • Pttrns,
  • Mobile Patterns.

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

Создание каркасов

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

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

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

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

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

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

Создание макетов приложения

Как только иерархия установлена и структура каждого экрана определена, вы можете перейти к программному обеспечению, например, Figma или Sketch, для разработки своего продукта. Figma — облачный инструмент для UI-дизайна. Идеально подходит для реализации каркасов на этом этапе процесса.

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

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

Источник: https://tproger.ru/translations/turn-ideas-into-ui-design/

UX дизайн — 25 бесплатных инструментов в помощь веб дизайнеру

Договор о разработке шаблонов дизайна пользовательского интерфейса

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

А все, потому что взаимодействие между сайтом и пользователями растет экспоненциально, это значит, что чтоб найти отзыв у пользователя, веб-дизайнерам необходимо заботиться о пользовательском опыте (UX – User Experience – «опыт взаимодействия»).

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

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

К счастью, проектирование интерфейсов это уже давно не новая тема, и в Интернете есть сотни инструментов проектирования UX. Конечно же, мы не станем перечислять их все.

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

UX дизайн инструменты для моделирования и проектирования мокапов и прототипов

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

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

Благодаря этим UX дизайн инструментам вы сможете протестировать продукт на протяжении всего производственного процесса и внести улучшения в создание надежного пользовательского интерфейса для вашей целевой аудитории.

Инструмент для проектирования интерфейсов Moqups

Приложение Moqups isana HTML5 предназначено для создания макетов, мокапов и прототипов. Moqups предоставляет огромное количество заготовок и шаблонов, которые можно использовать для создания основы вашего проекта. Вы можете настроить каждый компонент и задавать свои цвета, размер текста, иконки и т. д.

Wireframe

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

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

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

Pencil

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

Balsamiq

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

PowerMockup

Вы мастер PowerPoint? Тогда вам понравится этот инструмент, так как он превратит программу PowerPoint в мощный UX дизайн инструмент для создания макетов.

Это означает, что вам вообще не придется изучать новое программное обеспечение.

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

Mockplus

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

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

UXPin

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

Solidify

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

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

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

Gliffy

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

POP

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

POP создан для того, чтоб помочь вам с такой сложной задачей.

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

Инструменты для A/B тестирования

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

Desinion

Не уверены, что создаете проект, который пользователи действительно хотят увидеть? С помощью этого инструмента A/B тестирования вы можете задать любой интересующий вас вопрос и получить реальный ответ пользователей.

У инструмента есть очень полезная функция – обсуждение. Вы можете запустить обсуждение на своем сайте, чтобы привлечь пользователей к процессу проектирования.

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

Visual Website Optimizer

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

Optimizely

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

Инструменты для юзабилити тестирования

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

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

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

Loop11

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

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

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

Crazy Egg

Источник: https://www.motocms.com/blog/ru/ux-design-besplatnye-instrumenty/

Шаблоны в проектировании интерфейсов

Договор о разработке шаблонов дизайна пользовательского интерфейса

Для того чтобы понять, что такое паттерн в дизайне пользовательского взаимодействия, достаточно провести аналогию с объектами реального мира.

Повторяющиеся узоры в природе, декорировании помещений и одежды или паттерны поведения человека (привычка) имеют элементы, которые повторяются предсказуемо.

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

Как только вы поймете, какой шаблон решает ту или иную проблему, начнете экономить время, работая эффективно.

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

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

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

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

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

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

Но и в этом случае нужно понимать «ЧТО» и «ЗАЧЕМ».

Углубляясь в теорию

Если стало понятно, зачем исследовать паттерны, – предлагаю пройтись по основным моментам дизайн-паттернов пользовательского интерфейса.

Паттерны принято разделять на 3 уровня организации:

  • Контекст (Context)
  • Сценарий (поток) (Flow)
  • Внедрение (Implementation)

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

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

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

Широко используемые паттерны

Более детально рассмотрим уровень «Сценарий», где совершается большое количество ошибок.

Паттерны навигации (Navigation)

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

dribbble.com

Паттерны ввода (Getting input)

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

registration form

dribbble.com

Подача контента (Dealing with data)

Каким образом подается контент для быстрого просмотра, поиска и работы с ним. Примеры: галереи, таблицы, карточки.

Pinterest

Социальные (Social)

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

Что теперь с этим делать на практике?

Нужно проверить, соответствует ли конкретный шаблон вашим потребностям:

  1. Проблема. Какую проблему, связанную с использованием системы, необходимо решить.
  2. Ситуация. Что приводит к тому, что возникает проблема.
  3. Принцип. Паттерн основан на одном или большем количестве эргономических принципах.
  4. Решение. Описывает только суть проблемы, которую можно решить разными способами.
  5. Почему. Почему данный шаблон может быть применен к решению данной проблемы и как это повлияет на удобство использования.
  6. Пример. Примеры удачного применения шаблона.
  7. Внедрение. Как применить этот шаблон к текущей проблеме.

Рассмотрим на примере 7 компонентов модели использования паттерна.

В чем заключается проблема?

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

dribbble.com

Что приводит к проблеме?

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

dribbble.com

Какой принцип применить?

Предотвращение ошибок ( Я. Нельсон).

dribbble.com

dribbble.com

Как решить проблему?

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

Зачем решать эту проблему?

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

Какие примеры решения подобной проблемы уже существуют?

Google использует подсказки, чтобы сократить количество неверно введенных данных.

В калькуляторе используются только цифровые символы.

dribbble.com

Или использовать маски ввода, как в следующем примере.

dribbble.com

Как внедрить данный шаблон?

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

После сказанного

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

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

Это как сороконожка, которая научилась бегать после того, как поняла, как ходить.

Так что, всем успехов в этом марафоне.

И на дорожку несколько ресурсов, которые дадут еще немного более глубокое понимание темы.

  1. www.interaction-design.org
  2. ui-patterns.com
  3. ui-patterns.com

Ранее Telegraf.Design писал о том, как анимировать интерфейсы быстро и просто.

Источник: https://telegraf.design/shablony-v-proektyrovanyy-ynterfejsov/

Этапы разработки пользовательского интерфейса: как сделать так, чтобы UI не лишил вас прибыли — Дизайн на vc.ru

Договор о разработке шаблонов дизайна пользовательского интерфейса

В ноябре 2018 года студия «Лайв Тайпинг» рассказывала читателям vc.ru, из чего складывается стоимость мобильного приложения. Эта статья посвящена одному из слагаемых: пользовательскому интерфейсу.

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

Пользовательский интерфейс, или UI (User Interface) — это внешний вид продукта, способ общения между пользователем и программой. А ещё интерфейс влияет на то, будет ли продукт приносить деньги и пользоваться уважением и любовью аудитории.

Доказывать важность дизайна как магнита для пользователей удобно на примере соцсетей с миллионами пользователей. Резонансным случаем в рунете стал редизайн «Кинопоиска». 96% негативных отзывов на него говорят сами за себя: владельцы сайта, компания «Яндекс», сделала это без оглядки на мнение пользователей.

Когда плиточный дизайн — не лучшая идея Источник: tjournal.ru

Новый дизайн фокусировал внимание пользователей на возможности смотреть фильмы платно через партнёров «Яндекса», и это решало только задачи площадки и партнёров. Но пользователи больше всего ценили сайт за рейтинги, оценки, списки фильмов, топ-250, блоги и всё, что создаётся аудиторией.

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

Редизайн «Живого журнала» в 2014 году тоже не впечатлял. Его хорошенько почистили от лишних элементов, но в целом он не вызвал восторгов: типографика, модульная сетка, адаптив — всё выглядело сырым и неудобным.

страница в 2014 году. Вернуться к старой версии (как и во времена былого величия «Живого журнала») нет никакой возможности

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

Итак, разберём особенности разработки пользовательского интерфейса пошагово.

Проектирование

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

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

Ответить на большую часть этих вопросов поможет составление портрета целевой аудитории (ЦА) — тех самых людей, для которых делается продукт.

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

  • Коридорный метод. Обратная связь поступает от родных, друзей и коллег дизайнеров. Собрать её легко, но этого недостаточно.
  • Разговор с вами. Справедливо предполагается, что вы как никто знаете, что нужно вашей аудитории.
  • Полевые исследования.

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

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

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

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

Ключевые персоны — это характерные представители ЦА.

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

Например, типичному пользователю приложения «Киноголик» для покупки абонементов в кино 23 года, он работает в ИТ-компании и любит смотреть фильмы на английском.

Такая персона становится центром user story, или пользовательской истории. Это краткий, в несколько строк, рассказ про персону и то, как она работает с функциональностью приложения и какой цели достигает. User story строится по шаблону:

«Как , я »

Поместив нашего 23-летнего фаната оригинальных версий в этот шаблон, получим:

«Как , я »

Компания Intercom славится не только комплексным решением по внедрению чатов в сайты и мобильные приложения, но и изобретением подхода Jobs To Be Done. В основе подхода лежит не личное качество ключевой персоны, а обстоятельства и мотивация, которые толкают персону пользоваться продуктом. «Размышления» персоны называются Job story, а шаблон выглядит так:

«Когда , я хочу »

Ситуация с кинолюбом в рамках такого подхода выглядит иначе:

«Когда , я ,

Подробнее про подход Jobs To Be Done написала в своём блоге платформа Tilda.

От User story и Job story мы переходим к User scenario. Это маршрут взаимодействия пользователя с продуктом и достижения цели.

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

Загрузка фото: от желания до его воплощения

Прототипирование

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

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

Будет ли вайрфрейм грубым наброском, который вы сделали с коллегами ручкой на бумаге для принтера, или созданной в графическом редакторе организованной картой экранов — решать вам. Единственное: готовьтесь объяснить клиенту, что визуально вайрфрейм не имеет отношения к финальному продукту.

Вайрфрейм, набросанный от руки

Вайрфрейм, сделанный в Sketch

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

Детализированный прототип — следующий шаг вайрфрейма по лестнице эволюции пользовательского интерфейса.

Как и вайрфрейм, это макет, но чуть более конкретный: если в вайрфрейме экран с чатом состоит из окружностей и прямоугольников, только намекающих на свои назначения, то в детализированном прототипе окружность — это ТОЧНО фото пользователя, а прямоугольник — ТОЧНО текст сообщения c прикреплёнными файлами, аудиозаписями и стикерами.

Для презентации прототипа мало показать экраны. Нужно показать, к чему и куда приводит взаимодействие будущего пользователя с элементами интерфейса. Связав элементы линиями с другими экранами, на которые попадёт пользователь, вы получите пользовательские сценарии использования приложения, или user flow.

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

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

В качестве софта для этой задачи мы используем Overflow, чей слоган «User flows done right» даёт понять, что время за этой работой пройдёт продуктивно и с пользой. В Overflow легко импортируются экраны из Sketch или Figma, а сделать flow для 100 экранов можно за час — гораздо быстрее, чем рисовать стрелочки самому.

Нужен дополнительный уровень понимания, как продукт будет работать? С помощью таких сервисов, как Marvel, InVision, POP App и Origami Studio детализированный прототип можно превратить в интерактивный.

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

Его создание — этап необязательный, так как с презентацией будущей работы справляются макеты и user flow. Но когда нужно показать возможности мобильного приложения и раскрыть перед клиентом предстоящий объём работ в деталях, используйте его.

После утверждения логики и функциональности продукта этап прототипирования можно считать завершённым.

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

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

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

Разработчики получают от дизайнеров прототип и user flow, чтобы максимально точно оценить этап разработки и ориентироваться в логике продукта. Затем на будущий продукт начинают накатывать стиль.

Стилизация

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

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

Дизайн-концепт «Киноголика»

Уважающий дисциплину дизайнер уже давно оценил прелести работы в Sketch — ведь здесь так удобно вести макеты для iOS и Android в отдельных файлах, превращать в легко читаемые символы повторяющиеся элементы интерфейса, заранее присваивать таким элементам стили и отступы от краёв экрана и делать много чего ещё. Всё это складывается в дизайн-систему.

Как и в случае прототипа, готовый дизайн согласовывается с клиентом. Когда всех всё устраивает, дизайн готовится для передачи разработчикам. Сколько времени и сил можно сэкономить, сделав это грамотно посредством Zeplin (спойлер: очень много), можно узнать из нашей статьи.

После этого начинается разработка мобильного приложения или сайта.

Вывод

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

«Что делать?»

Это вопрос о том, насколько пользователю понятна основная функция продукта. Обозначить её нужно на этапе проектирования — тогда же, когда определяется целевая аудитория.

«Куда идти?»

Путь к цели лежит через взаимодействие пользователя с интерфейсом. Кнопка за кнопкой, поле ввода за полем ввода, экран за экраном — и так до заветной покупки или публикации поста. Грамотно составленный user scenario, отрепетированный на прототипе, уберёт с этого пути все ухабы.

«Куда нажимать?»

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

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

Желаю вам делать хорошие пользовательские интерфейсы и не делать плохие. Если у вас возникли вопросы к нашему процессу или вы хотите поделиться своим подходом к разработке интерфейса — добро пожаловать в комментарии.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

Источник: https://vc.ru/design/58502-etapy-razrabotki-polzovatelskogo-interfeysa-kak-sdelat-tak-chtoby-ui-ne-lishil-vas-pribyli

Искам нет
Добавить комментарий