🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
Пользовательский интерфейс
Пользовательский интерфейс
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Ссылка в почте на Айфоне
Мы привыкли считать ссылки частью веба, поэтому даже если мы встречаем ссылку в приложении, мы ожидаем попасть на веб‑страницу. Ссылка в письме не ведёт на другой экран почтовой программы, а открывает статью.
Ссылка в почте на Айфоне
Мы привыкли считать ссылки частью веба, поэтому даже если мы встречаем ссылку в приложении, мы ожидаем попасть на веб‑страницу. Ссылка в письме не ведёт на другой экран почтовой программы, а открывает статью.
Важнейшее свойство ссылки — наличие адреса, который можно сохранить или переслать. Мы рассчитываем, что по ссылке откроется одна и та же страница в любой день и с любого компьютера, иначе мы воспринимаем ссылку сломанной.
Адрес ссылки — техническая информация, но поскольку люди его видят и используют, к его виду стоит подходить внимательно.
В адресах часто видны названия файлов на сервере, переменные и другие технические данные — им там не место.
Адрес с числовым идентификатором страницы невозможно запомнить, и нельзя догадаться, что за ним скрывается.
Смешивать текстовое название для человека и числовой идентификатор для машины — тоже плохая практика. Всё, что не имеет смысла в мире пользователя, не должно попадать в адрес.
Адрес показывает, какое место в иерархии сайта занимает страница. Поэтому мы ожидаем, что, стерев фрагмент адреса до последнего слеша, мы попадём на родительскую страницу.
Часто пары «параметр‑значение» можно превратить в иерархию без ущерба для смысла. Без /by‑price квартиры отобразятся в порядке по умолчанию.
Иногда разработчики лишь имитируют иерархию таким образом, а стирание фрагмента адреса до слеша приводит вникуда. Страницы /post не просто не существует; этот адрес не имеет смысла — невозможно даже предположить, что могло бы там находиться.
Оставлять «голые» переменные в адресе допустимо только на страницах с фильтрами, когда их несколько, и они все имеют смысл для пользователя. Но даже в этом случае часто можно найти способ превратить адрес в иерархический.
Плохо
example.com/index.php?page=home
Хорошо
example.com
Плохо
example.com/index.php?page=43892
Хорошо
example.com/interviews/jobs
Плохо
example.com/43892‑steve‑jobs‑interview
Хорошо
example.com/interviews/jobs
Хорошо
example.com/maps/world/mercator
example.com/maps/world/mercator
example.com/maps/world/mercator
Плохо
example.com/apartments?sort=price
Хорошо
example.com/apartments/by‑price
example.com/apartments/by‑price
Плохо
example.com/post/58
example.com/post/58
Допустимо
example.com/apartments?bedrooms=2&furnished=yes&district=central&sort=price
Хорошо
example.com/apartments/2‑bedrooms/central‑district/furnished/by‑price
Плохо
example.com/index.php?page=home
Хорошо
example.com
Плохо
example.com/index.php?page=43892
Хорошо
example.com/interviews/jobs
Плохо
example.com/43892‑steve‑jobs‑interview
Хорошо
example.com/interviews/jobs
Хорошо
example.com/maps/world/mercator
example.com/maps/world/mercator
example.com/maps/world/mercator
Плохо
example.com/apartments?sort=price
Хорошо
example.com/apartments/by‑price
example.com/apartments/by‑price
Плохо
example.com/post/58
example.com/post/58
Допустимо
example.com/apartments?bedrooms=2&furnished=yes&district=central&sort=price
Хорошо
example.com/apartments/2‑bedrooms/central‑district/furnished/by‑price
Важнейшее свойство ссылки — наличие адреса, который можно сохранить или переслать. Мы рассчитываем, что по ссылке откроется одна и та же страница в любой день и с любого компьютера, иначе мы воспринимаем ссылку сломанной.
Адрес ссылки — техническая информация, но поскольку люди его видят и используют, к его виду стоит подходить внимательно.
В адресах часто видны названия файлов на сервере, переменные и другие технические данные — им там не место.
Адрес с числовым идентификатором страницы невозможно запомнить, и нельзя догадаться, что за ним скрывается.
Смешивать текстовое название для человека и числовой идентификатор для машины — тоже плохая практика. Всё, что не имеет смысла в мире пользователя, не должно попадать в адрес.
Адрес показывает, какое место в иерархии сайта занимает страница. Поэтому мы ожидаем, что, стерев фрагмент адреса до последнего слеша, мы попадём на родительскую страницу.
Часто пары «параметр‑значение» можно превратить в иерархию без ущерба для смысла. Без /by‑price квартиры отобразятся в порядке по умолчанию.
Иногда разработчики лишь имитируют иерархию таким образом, а стирание фрагмента адреса до слеша приводит вникуда. Страницы /post не просто не существует; этот адрес не имеет смысла — невозможно даже предположить, что могло бы там находиться.
Оставлять «голые» переменные в адресе допустимо только на страницах с фильтрами, когда их несколько, и они все имеют смысл для пользователя. Но даже в этом случае часто можно найти способ превратить адрес в иерархический.
Последовательность
Страницы сайта или экраны приложения могут образовывать последовательность. В дополнение к кнопкам линейного перемещения вперёд и назад иногда используют ссылки для прямого перехода к определённому шагу.
Мастер установки программы «Микрософт Офис»
Последовательность
Страницы сайта или экраны приложения могут образовывать последовательность. В дополнение к кнопкам линейного перемещения вперёд и назад иногда используют ссылки для прямого перехода к определённому шагу.
Мастер установки программы «Микрософт Офис»
Пошаговый процесс добавляет порядка. Если слишком длинную форму разбить на шаги, она может стать проще в глазах пользователя.
Но иногда дизайнеры без повода усложняют интерфейс нумерацией шагов. Например, так один из студентов‑дизайнеров организовал терминал покупки билетов на метро. У пользователя складывается впечатление, что ему предстоит целое путешествие.
Получение билетов и сдачи разделять ни к чему: автомат может выдать всё сразу.
Но даже это странно считать отдельным шагом. Это уже результат, пользователю делать ничего не нужно.
Подтверждение бессмысленно — это мы знаем из главы о привычках.
Выходит, чтобы купить билеты, нужно их выбрать и оплатить.
Но это очевидно, и явное деление на шаги ни к чему.
О бесполезности подтверждений:
Привычка 27
Сложная форма. Нумерация шагов помогает не заблудиться
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Сложная форма. Нумерация шагов помогает не заблудиться
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Простой интерфейс. Нумерация создаёт ненужное ощущение сложности
Пошаговый процесс добавляет порядка. Если слишком длинную форму разбить на шаги, она может стать проще в глазах пользователя.
Но иногда дизайнеры без повода усложняют интерфейс нумерацией шагов. Например, так один из студентов‑дизайнеров организовал терминал покупки билетов на метро. У пользователя складывается впечатление, что ему предстоит целое путешествие.
Получение билетов и сдачи разделять ни к чему: автомат может выдать всё сразу.
Но даже это странно считать отдельным шагом. Это уже результат, пользователю делать ничего не нужно.
Подтверждение бессмысленно — это мы знаем из главы о привычках.
Выходит, чтобы купить билеты, нужно их выбрать и оплатить.
Но это очевидно, и явное деление на шаги ни к чему.
О бесполезности подтверждений:
Привычка 27
Последовательная навигация используется в вебе. Кнопки «Назад» и «Вперёд» можно считать частью «силуэта» браузера. Правда, перемещают они не по заранее созданной последовательности страниц, а по истории переходов.
Последовательная навигация используется в вебе. Кнопки «Назад» и «Вперёд» можно считать частью «силуэта» браузера. Правда, перемещают они не по заранее созданной последовательности страниц, а по истории переходов.
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015