Наука на страже интерфейсов: как сделать кнопки в приложении по-настоящему удобными

[sbnur]

а что делать людям с толстыми пальцами

[ZyXI]

Местом нажатия является центр пятна нажатия. Алгоритм обработки пятна от толщины пальца не зависит. Так что если люди с большими пальцами не нажимают какими‐нибудь странными способами (к примеру, «всей рукой сразу», или располагая палец настолько параллельно экрану, насколько это вообще возможно), то точность не страдает. Единственная возможная неприятность — палец закрывает кнопку. Но траектория его движения обычно вычисляется мозгом до закрытия пальцем кнопки, поэтому никаких проблем быть не должно.

[perfect_genius]

Если учитывается DPI, то размер кнопки от этого не изменится.

[zahmTOD]

Давно висит мысль, что мобильные интерфейсы должны иметь настройку, по типу, как для плохо видящих людей.
С тремя размерами пальца )

[MeGaPk]

Можно где то английский вариант статьи? Хочу нашему дизайнеру на курение дать :).

[handicraftsman]

http://scotthurff.com/posts/how-to-make-truly-tappable-user-interfaces

[aamonster]

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

[Majvik]

Замечу неточность исходной статьи. В google material стандартный размер иконки составляет 24dp, причем «кликабельная» иконка вписывается в «некликабельную» область в 48dp, что по мнению google соответствует 9мм.
И 56dp это размер floating action button
При разработке дизайна в однократном размере 1dp приравнивается к 1px, что можно заметить по Material Design Template в том же вышеупомянутом Sketch app.
Можно проследить зависимость «кликабельной» области и «некликабельное» пространство между кнопками. У больших «активных» элементов отступы меньше, чем у маленьких

[agent10]

С чего вы взяли, что кликабельная область только 24dp? Она как раз составляет 48dp(«touch targets should be at least 48 x 48 dp»). А вот иконка/картинка внутри могут быть меньше.

[Retifff]

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

[martin_wanderer]

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

[Tatooine]

Как человек седьмой год занимающийся разработкой бизнес решений могу сказать что среднестатистический юзверь не на такое способен. ))))
По теме — спасибо авторам за труд. Надо будет взять на заметку.

[zahmTOD]

Как развидеть КДПВ?

[Denkenmacht]

Ужасный интерфейс плеера все равно.
А размер кнопок регулировки громкости они тоже сделали по-больше? Полузнки это в принципе очень неудобно в телефон, как в него попадать.

[Majvik]

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

Палец тогда должен быть как

[Sadler]

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

[Darthman]

Странно только при всём этом было в виндовс 10 мобайл видеть в скайпе и других приложениях от МС кнопки размером гораздо меньше 10 мм. Гайдлайны написали, а сами не следуют.

[Majvik]

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

[vintage]

Кнопки они увеличили. Ну молодцы, но проблему не решили. Хочешь изменить громкость — попадаешь в перемотку (слайдер-то не увеличили). Тут проблема основная в том, что дизайнеры думают о красоте, а не о том, как этим пользоваться. Всё управление унесли наверх, в результате до него сложно дотянуться. Зато картинку, которая по большому счёту нафиг не нужна, сделали на пол экрана прямо под пальцем. Сделали надпись огромными шрифтами в одну строку — длинные названия песен перестали влезать. Переносить на новую строку? Это же не красиво! Лучше сделаем нескучную бегающую полосу. Теперь чтобы прочитать название песни нужно потратить несколько секунд следя за "сексуальной анимацией".

Что надо было сделать?

• Увеличить не только кнопки, но и слайдеры.
• Не обрезать слова, а дать названию перенестить на новую строку.
• Отдать приоритет названию композиции, что сейчас играет, а не обложке альбома и его названию.
• Разнести контролы дуг от друга. Например, регулировать громкость сверху (её всё-равно обычно физическими клавишами регулируют), кнопки — по середине, как наиболее используемые, а перемотку — внизу (она нужна редко, но метко).
• Фото альбома можно вообще фоном поставить, кнопки и слайдеры сделать полупрозрачными — будет и красиво и удобно.

И чтобы это всё понять не нужно никаких исследований. Достаточно просто подумать.