x
 
Константин Хмелинин
28 декабря 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

Буду благодарен, если вы найдёте время прокомментировать мою работу :-)


Константин!

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

На мой взгляд, шапка не так уж и плоха. Главная проблема в ней — пересекающиеся модули. И поле поиска, и заголовок «Обращения» связались с кнопкой и меню:

Форма текста и порядок чтения

Из-за этого шапка выглядит сложной. Без кнопки лучше:

Поставим кнопку по-якорному справа в одну строку с меню и заголовком, а имя пользователя — меленько и аккуратно в угол:

Якорные объекты

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

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

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

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

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

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Дима Кудинов
29 декабря 2016

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

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

Женя Волков
29 декабря 2016

Михаил, спасибо за совет!

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

На кнопке следует написать глагол, чтобы было понятно, что произойдёт при нажатии.

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


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

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

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

Вот такой веб 2.0.

1 1 4




Недавно всплыло

Визуализация проявляет 4 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Это какие‑то другие пиксели? Как они соотносятся? 2 Защититься от случайного нажатия «Сдаться» 1