https://kirillbelyaev.com/ru/blog/?go=tags/fitts/ о подаче информации, айдентике, интерфейсах и жизненной среде Кирилл Беляев ru E2 (v3572; Aegea) Кирилл Беляев о подаче информации, айдентике, интерфейсах и жизненной среде https://kirillbelyaev.com/ru/blog/?go=all/small-icons/ https://kirillbelyaev.com/ru/blog/?go=all/small-icons/ Mon, 31 Oct 2016 12:36:30 +0300 Кирилл Беляев https://kirillbelyaev.com/ru/blog/?go=all/small-icons/ <p>В веб-приложении есть список сущностей. Например, привычные для меня — таблицы и графики. Поэтому и иконки условных файлов такие.</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/files@2x.png" width="179" height="156" alt="" /> </div> <p>Иногда их удаляют и переименовывают. Это редкие сценарии, которые лучше делать прямо в списке пока объект перед глазами. Если у списка мало места, подойдут иконки.</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/regular@2x.png" width="179" height="156" alt="" /> </div> <p>Клик в корзину сразу переносит «файл» в список с удалёнными. А карандаш запускает редактирование имени. Поле ввода закрывает иконки, предохраняя от случайного попадания. Клик мышкой (или клавиша «Ввод») вне поля сохраняет изменения.</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/regular-edit@2x.png" width="179" height="156" alt="" /> </div> <p>Задача решена, но есть проблемы — иконки маленькие и стоят близко, поэтому легко попасть в соседнюю (<a href="http://raskin-interface.narod.ru/interface/chapter4.htm#s4.4">подробнее о законе Фиттса</a> у Раскина). Да, и как закончить редактирование не очевидно. Место ограничено, поэтому площадь всплывающей области увеличить нельзя. Увеличить иконки тоже не получится. </p> <p>Убираю при наведении иконку типа «файла», и ставлю на её место карандаш. Радую Фиттса, выигрываю в длине текста.</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/change-icon@2x.png" width="179" height="156" alt="" /> </div> <p>Теперь области клика можно сделать сильно больше иконок:</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/change-icon-click@2x.png" width="179" height="156" alt="" /> </div> <p>И если оставлять карандаш при редактировании, то пусть он завершает редактирование (включение и выключение на одном элементе не редкость).</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/change-icon-edit@2x.png" width="179" height="156" alt="" /> </div>