Проектирование интерфейса

← →
SPeller © (2009-06-05 08:17) [0]

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

← →
Petr V. Abramov © (2009-06-05 08:42) [1]

> У каждого свои представления правильности и красивости,
> свои привычки и вкусы в построении пользовательского интерфейса.
>

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

← →
oldman © (2009-06-05 08:49) [2]

А нас когда-то учили, что интерфейс должен быть описан в ТЗ...
Не, я серьезно!

← →
Юрий Зотов © (2009-06-05 08:49) [3]

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

Так ведь у авторов таких книг, как и у всех остальных, тоже "свои представления правильности и красивости, свои привычки и вкусы в построении пользовательского интерфейса".

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

Берем экранной лупу (zoom) и смотрим детали офисных диалогов и прочих офисных окон (какие размеры элементов, где сколько пикселей отступа и т.д.). Потом у себя делаем так же.

← →
Dennis I. Komarov © (2009-06-05 09:02) [4]

ИМХО
Если мы пишем под MS Windows, то GUI должен быть как можно ближе приближен к стилю MS. :)

← →
SPeller © (2009-06-05 09:24) [5]

> А нас когда-то учили, что интерфейс должен быть описан в
> ТЗ...

Пока нечего описывать в ТЗ, поскольку никто из нас не знает как это должно быть. В этом-то и беда.

> Так ведь у авторов таких книг, как и у всех остальных, тоже
> "свои представления правильности

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

> Достаточно взять за образец, скажем MS Office

2003 или 2007? :) Среди программистов не нашлось кто переварил бы интерфейс 2007 после 2003, а коммерческий в восторге от 2007.

А вот эргономика - это да, это то, о чем никто у нас пока особо не задумывался :) Очень интересно почитать об этом.

← →
Petr V. Abramov © (2009-06-05 09:33) [6]

> SPeller © (05.06.09 09:24) [5]

> а коммерческий в восторге от 2007.

значит 2007 :)
а если софт для программистов, то 2003 :)

← →
Юрий Зотов © (2009-06-05 10:12) [7]

Вот основные правила. Они, конечно, законами не являются, но

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

2. Поэтому же метка располагается слева (или сверху) от относящегося к ней контрола.

3. Поэтому же "окончательные" кнопки (OK, ОТМЕНА, ПРИМЕНИТЬ, НАЗАД, ВПЕРЕД и т.п.) располагаются внизу справа (Anchors = [Right, Down]), причем кнопка НАЗАД располагается слева от кнопки ВПЕРЕД. Неплохо будет отделить такие кнопки от основного пространства формы горизонтальной чертой (бевелом).

4. Другой стиль расположения "окончательных" кнопок - вертикально у правого края формы (в порядке обхода сверху вниз). Отделяются от основного пространства формы вертикальной чертой. Но смешение диалогов разных стилей в рамках одной программы - нежелательно.

5. Контролы и пункты меню объединяются в функциональные группы (например, Cut, Copy, Paste должны идти подряд, а не вразнобой). Неплохо группу таких контролов выделить группбоксом.

6. Чаще используемые контролы должны предшествовать (в порядке обхода) реже используемым.

7. Рекомендуемые зазоры между контролами - 12 пикселей, а отступы контролов от краев парента - 8 пикселей (но на всех формах программы эти зазоры и отступы должны быть одинаковыми). Нужно иметь в виду, что правый и нижний отступы контролов от краев формы становятся в run-time на 1 пиксель меньше, чем было выставлено в design-time (почему - загадка).

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

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

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

Ну и т. д.

← →
Юрий Зотов © (2009-06-05 10:19) [8]

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

← →
SPeller © (2009-06-05 10:31) [9]

За пункты спасибо, пригодятся. Но вот по пункту "ну и т. д." расшифровочку бы найти в развернутом виде :)

> значит 2007 :)

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

← →
Юрий Зотов © (2009-06-05 10:47) [10]

> SPeller © (05.06.09 10:31) [9]

Ну так не надо копировать ВЕСЬ интерфейс полностью (тем более, что его еще и копировать замучаешься). Копировать надо ИДЕИ и ЧАСТЬ интерфейса.

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

А это уже "проблемы индейцев" :) Если пишешь непосредственно для определенного человека со своими тараканами, то это одно, а всем тараканам не угодишь :P

Советую почитать MSDN - там описываются концепции того, что считается "удобным"

например

http://msdn.microsoft.com/ru-ru/magazine/dd458810.aspx

> 1. Люди прывыкли читать слева направо и сверху вниз.

Хм, т.е. японцы и арабы уже не люди?

Японцы тут причем(сверху вниз).

С арабами и евреями, таки да, проблема ... :)

> Юрий Зотов © (05.06.09 10:47) [10]

золотые слова

> SPeller © (05.06.09 10:31) [9]
> Некоторые экселя боятся и не знают как там колонки раздвигать
> )

тогда им что в лоб что по лбу, что 2003 что 2007, а коммерческому проще продавать то, что самому искренне нравится.

Проектирование интерфейса Найти похожие ветки