Методы проектирования GUI для улучшения пользовательского интерфейса

Какие методы вы знаете\используете для создания удобного графического интерфейса?

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

  • Неблокирующие уведомления (плавающие диалоги, например, во всплывающих сообщениях Firefox3 или Vista в области лотка)
  • Отсутствие кнопки "Сохранить"
    Пример MS OneNote.
    Клиенты IM автоматически сохраняют историю разговоров.
  • Интегрированный поиск
    Поиск не только через файлы справки, но и сделать элементы пользовательского интерфейса доступными для поиска.
    Vista сделала хороший шаг к такому графическому интерфейсу.
    Scout addin Microsoft Office была отличной идеей.
  • Контекстно-ориентированный интерфейс (лента в MS Office 2007)

Вы реализуете что-то вроде перечисленных методов в своем программном обеспечении?

Edit:
Как отметил Ryan P, один из лучших способов создать полезное приложение - поставить себя на место пользователя. Я полностью согласен с этим, но то, что я хочу видеть в этой теме, - это конкретные методы (например, упомянутые выше), а не общие рекомендации.

ОТВЕТЫ

Ответ 1

Если вы зададите пользователю вопрос, не делайте его вопросом "да/нет". Потратьте время, чтобы создать новую форму и поставить глаголы как выбор, как в Mac.

Например:

 Would you like to save?    
     Yes        No

Должно быть:

  Would you like to save?
    Save        Don't Save

Ниже приведено более подробное описание .

Ответ 2

Посмотрите замечательную книгу Не заставляйте меня думать от Steve Krug.
Это веб-фокус, но многие из консепсов могут применяться ко всему, от блендеров до панелей автомобилей.
Темы:

  • Пользовательские шаблоны
  • Проектирование для сканирования
  • Мудрое использование копии
  • Навигационный дизайн
  • Макет главной страницы
  • Тестирование юзабилити

У него также есть блог под названием Advanced Common Sense

И некоторые случайные ссылки, связанные с UI:
 - Дизайн пользовательского интерфейса для программистов Joel Spolsky
 - 10 Юзабилити-кошмары, о которых вы должны знать

Ответ 3

Первые принципы: Уилфред Джеймс Хансен

  • Знать пользователя
  • Свернуть меморандум
  • Оптимизация операций
  • Инженер для ошибок


Последующие расширения: Dr. Тео Мандель

Размещение пользователей в элементе управления

  • Использовать режимы разумно (немодально)
  • Разрешить пользователям использовать клавиатуру или мышь (гибкая)
  • Разрешить пользователям изменять фокус (прерывается)
  • Отображать описательные сообщения и текст (полезно)
  • Предоставлять немедленные и обратимые действия и обратную связь (прощение)
  • Обеспечить значимые пути и выходы (судоходный)
  • Включение пользователей с разными уровнями навыков (доступно)
  • Сделать пользовательский интерфейс прозрачным (облегчающий)
  • Разрешить пользователям настраивать интерфейс (предпочтения)
  • Разрешить пользователям напрямую манипулировать объектами интерфейса (интерактивно)

Уменьшить нагрузку на память пользователя

  • Сбросить краткосрочную память (запомнить)
  • Полагайтесь на распознавание, а не на вызов (распознавание)
  • Предоставить визуальные подсказки (сообщить)
  • Предоставление по умолчанию, отмены и повтора (прощение)
  • Предоставить ярлыки интерфейса (частота)
  • Содействовать синтаксису Object-action (интуитивно понятный)
  • Использование метафоров реального мира (передача)
  • Пользовательское прогрессивное раскрытие (контекст)
  • Содействие визуальной четкости (организовать)

Сделать интерфейс совместимым

  • Поддержание контекста задач пользователей (непрерывность)
  • Поддерживать согласованность внутри и между продуктами (опыт)
  • Сохраняйте результаты взаимодействия с тем же (ожидания)
  • Обеспечить эстетический призыв и честность (отношение)
  • Поощрение исследования (предсказуемое)

Ответ 4

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

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

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

Ответ 5

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

Я попадаю в sooooo многих таких ситуаций, и это расстраивает. Иногда я заканчиваю публикацию на форуме по программному обеспечению, спрашивая, почему элемент управления greyed, когда всплывающая подсказка могла помочь мне через секунду! Большинство этих программ имеют файлы справки, которые бесполезны в таких сценариях.

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

Ответ 6

Одна из классических книг, которые помогут вам подумать о дизайне, - "Дизайн повседневных вещей" Дональда Нормана. Он дает отличные примеры в реальном мире. Например, если вы хорошо проектируете дверь, вам никогда не придется добавлять ярлыки, которые говорят "push" и "pull". Если вы хотите, чтобы они потянули, поставьте ручку; если вы хотите, чтобы они надавили, положите плоскую пластину. Нет никакого способа сделать это неправильно, и им даже не нужно об этом думать.

Это хорошая цель: сделать вещи очевидными. Так очевидно, что пользователю никогда не приходится делать что-то не так.. Если на печке есть четыре ручки, каждый рядом с глазом, очевидно, что каждая ручка управляет глазом рядом с ним. Если ручки расположены по прямой линии, все на левой стороне, вы должны пометить их, и пользователь должен остановиться и подумать. Плохой дизайн. Не заставляйте их думать.

Другой принцип: если пользователь делает ошибку, он должен быть очень легко отменить. Хороший пример - графическое ПО Google Picasa. Вы можете обрезать, перекрасить и подправить фотографии, которые вам нравятся, и если вы когда-нибудь передумаете - даже через месяц - вы можете отменить свои изменения. Даже если вы явно сохраняете свои изменения, Picasa создает резервную копию. Это освобождает пользователя от игры и изучения, потому что вы ничего не будете болеть.

Ответ 7

Я нашел UI Patterns, чтобы быть полезной ссылкой для такого рода вещей. Он устроен так же, как классическая книга шаблонов GoF Design Patterns, с описанием каждого шаблона, содержащим:

  • Проблема шаблона решает
  • Пример шаблона в действии
  • Примеры использования шаблонов
  • Решение для реализации шаблона
  • Обоснование для решения

Ответ 8

Если вы реализуете поиск, сделайте его живым, например, Locate32 и Google Suggest делает сейчас. Я так привык, что не нажал "Enter" в окне поиска.

Ответ 9

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

Ответ 10

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

Техника "желтого угасания" - это что-то еще популярное среди толпы RoR, которая выполняет нечто подобное. Вы никогда не хотите, чтобы пользователь задал вопрос: "Что только что произошло?" или "Что произойдет, когда я это сделаю?".

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

Ответ 11

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

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

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

Ответ 12

Если вы занимаетесь корпоративным программным обеспечением, у многих пользователей будут небольшие мониторы с низким разрешением. Или, если они старые, они будут иметь низкое разрешение, чтобы они могли видеть гигантские кнопки (я видел 800x600 на 24-дюймовом мониторе). У меня есть старый 15-дюймовый монитор с низким разрешением (800 x 600), поэтому я вижу, что программа будет выглядеть как в менее холостых условиях время от времени. Я знаю, что корпоративные пользователи в значительной степени должны принять то, что им дано, но если вы создадите winform, который не вписывается в экран 800x600, это никому не помогает.

Ответ 13

Здесь - отличный эпизод подкаста DotNetRocks, где Марк Миллер рассказывает о том, как создать Хороший пользовательский интерфейс; Несмотря на то, что название шоу - это скалы .NET, в этом эпизоде ​​говорится об общем правиле большого пальца о том, как создать пользовательский интерфейс, чтобы повысить производительность пользователей программы.

Вот эпизод exerpt

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

Ответ 14

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

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

Ответ 15

Мне нравится следовать этим 3 рекомендациям:

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

Ответ 16

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

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

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

Я нашел, что самый простой способ сделать это - начать с того, как и как ваши пользователи ежедневно работают на основе этого, что облегчит им встать на ноги (еще лучше сделать свою работу за несколько дней). Затем сделайте несколько демонстраций и разместите их перед пользователями, даже если они являются прототипами бумаги (есть книга об этом процессе под названием Paper Prototyping от Carolyn Snyder). Затем начните строить его и ставьте перед пользователями, поскольку он часто создается.

Я также рекомендую книгу "Проектирование интерфейсов" Дженифера Тидуэлла, опубликованную O'Reilly

Ответ 17

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

Ответ 18

Сун Майстер упомянул Марка Миллера. Вы можете найти некоторые из своих сообщений в блоге о большом пользовательском интерфейсе на блоге Express Developer. Вот скринкаст его Науки о большом представлении пользовательского интерфейса: part1 и part2. (оба требуют Veoh player).

Вы также можете найти его на dnrTV: Science of great user experience: part1 и part2.

Здесь google techtalks о пользовательском интерфейсе от Jen Fitzpatrick.

Приветствия

Ответ 19

При использовании раскрывающегося списка высота раскрывающегося списка по умолчанию обычно слишком низкая (по умолчанию, например, 8 элементов для winforms).

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

На самом деле, я не вижу смысла использовать все свободное пространство!

Это так очевидно для меня сейчас, но, к примеру, кажется, даже дизайнеры VisualStudio этого не поняли (кстати, если вы увеличите высоту Intellisense вручную, это останется таким, но этот оффтоп:))

Ответ 20

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

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

Ответ 21

Блог Coding Horror регулярно дает отличные идеи. Несколько примеров:

  • Исследовательское и инкрементное обучение
  • Самодокументирующий пользовательский интерфейс
  • Инкрементный поиск функций/интеллектуальный доступ к клавиатуре
  • Ориентированный на задачи дизайн (лента вместо меню и панелей инструментов)
  • Предоставление отмены вместо постоянного подтверждения

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