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

Вот несколько скриншотов:

введите здесь описание изображения При первом появлении диалогового окна кнопка Show More >> находится в фокусе. введите здесь описание изображения Версия 1: при вызове Show More >> диалоговое окно расширяется и автоматически перемещается по центру экрана. введите здесь описание изображения Версия 2: при вызове Show More >> диалоговое окно расширяется и не автоматически повторно центрируется на экране

У меня два вопроса:

  1. Лучше ли UX центрировать диалоговое окно на экране, когда оно развернуто? Это происходит на фоне незначительного мерцания (экран на самом деле не мигает, но это то, что вы замечаете).

  2. Следует ли переименовать кнопку Show More >>? Поскольку сообщение об ошибке появится над кнопками, следует ли убрать стрелки, поскольку они вводят в заблуждение? Кроме того, должна ли эта кнопка автоматически фокусироваться?

  3. Есть ли что-нибудь еще, что можно сделать, чтобы улучшить общую привлекательность диалога?

2
JeromeR 12 Окт 2015 в 09:10
У вас есть несколько предложений по обработке выравнивания сообщения. Вы также можете поработать, чтобы предотвратить ошибку. Вот несколько стратегий предотвращения ошибок: vanseodesign.com/web-design/minimize -ошибки-часть-iii
 – 
JeromeR
12 Окт 2015 в 09:14
1
В примере, который вы приводите, может быть, просто всегда показывать больше состояния и обходить весь этот вопрос? Это похоже на инструмент разработчика, и первоначальное ограждение пользователя от сведений об ошибках может не стоить дополнительного шага, чтобы добраться до деталей.
 – 
obelia
13 Окт 2015 в 20:30

3 ответа

Лучший ответ

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

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

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

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

2
JeromeR 12 Окт 2015 в 09:15

Вот что я думаю, что можно улучшить

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

2) Show more очень общий, он не говорит, что он будет делать... Поэтому используйте что-то вроде "Просмотреть подробности этой ошибки"

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

1
Ahsan Idrisi 12 Окт 2015 в 05:34
  1. По сути это переключатель. Поэтому я бы не стал повторно центрировать его, потому что это сместило бы положение кнопки «Просмотреть больше», заставив пользователя перемещать мышь, чтобы закрыть деталь.

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

  3. Сохраняйте ширину всплывающего окна одинаковой. В вашем макете кажется, что он становится шире, когда вы нажимаете «Показать больше >>».

0
Jung Lee 10 Окт 2015 в 07:23
Для вашей первой точки вам всегда нужно перемещать мышь, чтобы закрыть расширенный диалог.
 – 
Zizouz212
11 Окт 2015 в 23:21