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

Расскажите об управляемости.

(Часть третья: добавить элемент)


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

Было

Э1

Стало

Э2 Э1

Народная мудрость подкидывает пример неуправляемого предмета, которому отчаянно не хватает одного элемента:

Как чемодан без ручки: нести тяжело, а бросить жалко

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

По принципам минимизации конструкции и бесплатного дизайна ручку можно получить добавлением дырки, то есть пустоты:

Мебель «Дубльдом». Дизайнер Иван Овчинников

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

Добавление ручки не только повышает управляемость, но и создаёт ощущение, что предмет стал «ручным»:

Ручка Аймака. Фотография Каннона

Рассказывает Джони Айв:

  • Тогда люди побаивались техники, а если ты чего-то боишься, ты стараешься держаться от этого подальше. Я видел, что моя мать опасается подходить к компьютеру. И мне пришло в голову: ведь если приделать к нему ручку, он будет казаться более доступным. Более понятным. Это что-то на уровне интуиции. Ручка как бы разрешает вам прикоснуться к компьютеру. К несчастью, такая ручка, погруженная в корпус, стоила очень дорого. В прежнем Эпле я бы не отстоял свою идею. Стив прекрасен — он увидел мой проект и воскликнул: круто! Мне не пришлось ничего объяснять, он сам всё понял. Он сразу увидел, что ручка сделает Аймак более понятным и забавным.

    Волтер Айзексон. Стив Джобс

Если добавить неподъёмной балке противовес, человек сможет с ней управляться:

Шторка в автомобиле — дополнительный элемент, который управляет видимостью и количеством света в салоне.

Герой Курта Рассела мастерит хитрый обувной шкаф, управляемый ручкой и целой системой дополнительных шестерёнок и рельсов:

Непростой шкаф. Отрывок фильма «За бортом»

Чтобы повысить управляемость обычной полосы прокрутки, достаточно добавить графические пометки, представляющие содержание окна:

В пользовательском интерфейсе

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

Представим себе рекламный банер, предлагающий продлить подписку:

Электронный журнал «Главбух»

Даже если читатель хочет бесплатный номер «Кадрового дела», его желание не находит выхода.

Если добавить кнопку, читатель знает, что делать — банер заработает лучше:


Мы ещё вернёмся к этому примеру в одном из следующих советов, и посмотрим, как усилить его формулу.

Введение

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

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

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

Комментарии

Дима Шишкин
19 сентября 2016

Инфоскроллер нельзя посмотреть без установленного флеша.


19 сентября 2016

Дима!

Если вы или уважаемые советчики посоветуюте хорошую ХТМЛ-реализацию или просто демку, я с удовольствием заменю эту флешку 2005 года :-)

Артур Белостоцкий
19 сентября 2016

Инфоскроллер в текстовом редакторе «Сублайм».

Константин Якушев
23 сентября 2016

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

Фракс: https://larsjung.de/jquery-fracs/
Минимап: http://toolitup.com/minimap.html

Константин Якушев
23 сентября 2016

Кроме того, атом написан на джаваскрипте, и у него тоже есть такая функция: https://github.com/atom-minimap/minimap, но тут непонятно, насколько легко это портировать обратно в веб.

Дима Шишкин
31 августа 2017

Артём, если флеша нет, то можно показать скриншот инфоскроллера, так будет понятно о чём речь.

Илья Боронников
16 ноября 2018

Если в Хроме искать текст на странице, то справа на полосе прокрутки будут показаны места, где находятся элементы на странице.


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

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

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

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

Расскажите об управляемости: инструмент дизайнера Расскажите об управляемости: экосистема 1 Расскажите об управляемости: самоуправление Расскажите об управляемости: интерфейс




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

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Как написать хорошее резюме? 7 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33