ВВЕДЕНИЕ:

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

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

Ниже приведено эталонное изображение:

enter image description here

РЕЛЕВАНТНАЯ ИНФОРМАЦИЯ:

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

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

То же самое и с редактированием и чтением данных: если пользователь вводил новые данные, а затем нажимал на иконку Open folder, форма сбрасывалась и запись из выпадающего списка ( выпадающего списка ) загружалась в форму.

В обоих случаях изменения/новая запись вносится в базу данных нажатием на кнопку Save (обведена оранжевым кругом).

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

Добавление новых вкладок осуществляется нажатием одной из кнопок в синем кружке.

/На данный момент мои работодатели еще не решили, как будет вести себя приложение, когда пользователь нажимает кнопку Delete или Print на панели инструментов. Тем не менее, эти варианты будут существовать на 100%./

МОИ УСИЛИЯ ДЛЯ РЕШЕНИЯ ЭТОГО:

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

Изображение выше - это все, что у меня есть на данный момент.

ВОПРОСОВ:

  • Можно ли переработать приведенный выше макет, чтобы у пользователя был лучший UX при чтении/редактировании данных без слишком большого вмешательства в графический интерфейс для ввода новой записи?

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

Спасибо.

2
Community 16 Июн 2020 в 13:51
Можете ли вы сказать мне, для какой платформы будет использоваться эта форма? Кроме того, кто будет потенциальными пользователями?
 – 
DarkLord
11 Дек 2014 в 18:09
Кроме того, какие файлы необходимы, а какие необязательны?
 – 
DarkLord
11 Дек 2014 в 18:09
@DarkLord: Платформа -> Windows XP и выше; Пользователь -> кто-то без опыта программирования, кто-то, кто использует компьютеры в повседневной жизни «стандартным образом» (для музыки, написания отчетов в MS Word или Excel, игры в видеоигры и так далее...)
 – 
AlwaysLearningNewStuff
11 Дек 2014 в 18:11
@DarkLord: Элементы управления в верхнем левом групповом поле и в нижнем левом групповом поле являются обязательными. Верхний и нижний правый групповой блок содержит элементы управления, которые не являются обязательными с «теоретической точки зрения», но на практике они будут введены на 90%. Если потребуется, я могу обновить свой пост с дополнительной информацией, поскольку не все могут поместиться в этот комментарий. Спасибо, что посмотрели мой пост. С уважением.
 – 
AlwaysLearningNewStuff
11 Дек 2014 в 18:14
Какие поля обязательны, а какие необязательны? Вы всегда должны выдавать предупреждающее сообщение, если пользователь ввел что-то в форму и нажимает на новую страницу. Кроме того, в каком порядке пользователь должен вводить форму.
 – 
DarkLord
11 Дек 2014 в 18:14

3 ответа

Лучший ответ

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

По сути, у вас есть как «Список пользовательского интерфейса», так и «Сведения об элементе» на одном экране. Два основных варианта:

<сильный>1. Иметь два отдельных экрана — Список и Элемент

Самый простой в реализации. Возможно, может быть менее эффективным.

mockup

загрузить исходный код bmml — Каркасы, созданные с помощью Мокапы Balsamiq

<сильный>2. Сильно разделяйте пользовательский интерфейс

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

mockup

загрузить исходный код bmml

Очевидно, что есть вариации вышеперечисленного. например Вы можете добавить режимы «Только для чтения» и «Редактировать» и иметь кнопку «Редактировать».

2
Community 16 Июн 2020 в 13:51
Здесь мне нравится вариант №2. Легко найти действие «Добавить новую запись» и интуитивно понятно, что я могу редактировать/удалять существующие записи.
 – 
DaveAlger
16 Дек 2014 в 17:07
При беглом взгляде необходимо более строго отделить функциональные возможности пользовательского интерфейса LIST и DETAIL друг от друга и сделать LIST основным пользовательским интерфейсом.
 – 
Jason A.
26 Дек 2014 в 22:21

Вкладки обычно содержат разные данные. Например, разные разделы формы, как сказал @staccato.

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

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


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

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

2
Waaghals 16 Дек 2014 в 01:03
Я проголосовал за ваш ответ. Спасибо за помощь, это действительно много значит. Я дал вознаграждение за другой ответ, потому что этот ответ косвенно решил некоторые из моих других проблем, что сэкономило мне время от ввода новых вопросов здесь или поиска в Интернете. Что касается официального принятия другого решения, мне кажется проще реализовать... С уважением.
 – 
AlwaysLearningNewStuff
18 Дек 2014 в 14:58

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

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

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

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

1
Community 13 Апр 2017 в 15:32
Я присудил награду, потому что эти ссылки решили некоторые другие проблемы, которые у меня были. Я просто не мог принять это официально, потому что не могу придумать решение без «наброска». С наилучшими пожеланиями.
 – 
AlwaysLearningNewStuff
18 Дек 2014 в 15:01