О текстовом вводе замолвите слово
11 likes596 views
Документ обсуждает важность usability и текстового ввода в интерфейсах, акцентируя внимание на различных проблемах и решениях, связанных с обработкой данных. Выделяются ключевые аспекты, такие как нормализация строк, введение чисел и дат, а также продвинутые функции для повышения удобства пользователей. Автор подчеркивает необходимость прощения ошибок и интуитивного взаимодействия для улучшения пользовательского опыта.
![[[ дизайн ]] (( сексуальность ))
┌--> Визуальная подача
+++++++++++++ |
+ Usability + ----┤
+++++++++++++ |
└--> Интерактив](https://image.slidesharecdn.com/wud-2009-textinputforever-091116054821-phpapp02/85/-10-320.jpg)
![4) Даты
• Обычно: ДД.ММ.ГГГГ
Ослабление 1: 16.02.76
ГГ ( 50 лет от текущего года)
Ослабление 2: 16021976
Точку можно не вводить – ДДММгг[гг]
Ослабление 3: 16ю02ю76
«ю» – это точка
>
. Ю](https://image.slidesharecdn.com/wud-2009-textinputforever-091116054821-phpapp02/85/-35-320.jpg)
О текстовом вводе замолвите слово
- 1. ┌-------------------┐ | О текстовом вводе | | замолвите слово | └-------------------┘ > Бибичев Андрей*) *) пациент психбольницы (ЕВПОЧЯ) > специально для WUD-2009 > ноябрь 2009
- 2. Текстовый и графический I. ДВА ЭПИГРАФА
- 3. « На что тебе твои самолеты, и радио, и твой Боннафу, раз у тебя нет истины » (с) Экзюпери
- 4. « На что тебе твои градиенты анимация Купер самолеты, и радио, и твой Боннафу, удобного текстового ввода раз у тебя нет истины » (с) Экзюпери
- 7. О месте данного доклада под солнцем Usability II. ВВЕДЕНИЕ
- 9. ┌--> Визуальная подача +++++++++++++ | + Usability + ----┤ +++++++++++++ | └--> Интерактив
- 10. [[ дизайн ]] (( сексуальность )) ┌--> Визуальная подача +++++++++++++ | + Usability + ----┤ +++++++++++++ | └--> Интерактив
- 12. ┌--> Визуальная подача +++++++++++++ | + Usability + ----┤ +++++++++++++ | └--> Интерактив
- 13. ┌--> Визуальная подача +++++++++++++ | + Usability + ----┤ +++++++++++++ | └--> Интерактив | | ┌--------------------┼-----------------┐ | | | V V V .................... ............. ............ . Непосредственное . . Текстовый . . Пока . . манипулирование . . ввод . . экзотика . .................... ............. ............
- 14. ┌--> Визуальная подача +++++++++++++ | + Usability + ----┤ +++++++++++++ | └--> Интерактив | | ┌--------------------┼-----------------┐ | | | V V V .................... ............. ............ . Непосредственное . . Текстовый . . Пока . . манипулирование . . ввод . . экзотика . .................... ............. ............ > Click / Touch > Drag-&-Drop > Жесты / Multi-touch > Датчики
- 16. ┌--> Визуальная подача +++++++++++++ | + Usability + ----┤ +++++++++++++ | └--> Интерактив | | ┌--------------------┼-----------------┐ | | | V V V .................... ............. ............ . Непосредственное . . Текстовый . . Пока . . манипулирование . . ввод . . экзотика . .................... ............. ............ > Click / Touch > голосовой > Drag-&-Drop ввод > Жесты / Multi-touch > дополненная > Датчики реальность
- 18. ┌--> Визуальная подача +++++++++++++ | + Usability + ----┤ +++++++++++++ | └--> Интерактив | | ┌--------------------┼-----------------┐ | | | V V V .................... ............. ............ . Непосредственное . . Текстовый . . Пока . . манипулирование . . ввод . . экзотика . .................... ............. ............ > Click / Touch > клавиатура > голосовой > Drag-&-Drop + ввод > Жесты / Multi-touch поле ввода > дополненная > Датчики реальность
- 21. « У меня есть для вас посылка, только я вам еѐ не отдам, так как у вас документов нет » (с) Печкин
- 22. « У меня есть для вас Сообщения их покажу посылка, только я вам еѐ не отдам, так как у вас документов нет » вы ввели телефон в формате 8(xxx)xxx-xx-xx а ожидался телефон в формате +7-xxx-xxx-xxxx (с) Печкин
- 23. А Clipboard?!
- 24. И даже в браузерах есть что развить • Хранение и просмотр истории текстового ввода – Когда, на каком сайте, что вводилось с возможностью промотать как мультик, взять в буфер обмена – и с поиском по этой истории
- 25. Важно: • Уметь прощать ошибки • Быть догадливыми – но ненавязчивыми Сексуальные интерфейсы, которые не уважают пользователей, т.е. не умеют прощать ошибки и не обладают смекалкой – суть стервы
- 26. Ввод строк Целые числа Десятичные числа Даты … Визуализация Продвинутые возможности III. MUST HAVE
- 27. 1) Ввод строк • Наибольшие проблемы доставляют ПРОБЕЛЬНЫЕ СИМВОЛЫ – обычный пробел – жесткий пробел – табуляция TAB user@login WorldUsability Day
- 28. Нормализация строк Step 1: Лидирующие пробельные символы X Step 2: Концевые пробельные символы X Step 3: Пробельные символы пробел Step 4: Несколько пробелов подряд 1 пробел
- 29. Несколько строк в одну
- 30. 2) Целые числа • Опять же пробелы – лидирующие и концевые – больше о них не вспоминаем – всегда убираем! • Группировка разрядов – пробелы – апострофы 1’000’234 – запятые
- 31. Простим группировку! • Радикальный способ: – убрать все нецифровые символы • Консервативный способ: – Убирать только пробелы, апострофы и запятые ? 12351 123,51 ? 123 ? 124
- 32. 3) Десятичные числа • Разделитель целой и дробной частей – запятая > – точка и «ю» . Ю • Мешается еще группировка разрядов – которая бывает через запятую
- 33. Отделяем «зерна» от «плевел» Случай 1: 123,456.789 Есть точка/«ю» это разделитель Случай 2: 123,456,789 Запятая несколько раз это группировка Случай 3: 123’456,789 Есть апострофы или пробелы в группировке тогда запятая это разделитель Случай 4: 123,4 123,45 123,4567 После запятой не 3 цифры это разделитель
- 34. Отделяем «зерна» от «плевел» Случай 5: 12345,678 До запятой > 3 цифр это разделитель Случай 6: 12,345 Ввод денег или целых это группировка Иначе: 12,345 Остается трактовать как разделитель Низкая достоверность этой догадки Если есть возможность, можно заглянуть в региональные настройки
- 35. 4) Даты • Обычно: ДД.ММ.ГГГГ Ослабление 1: 16.02.76 ГГ ( 50 лет от текущего года) Ослабление 2: 16021976 Точку можно не вводить – ДДММгг[гг] Ослабление 3: 16ю02ю76 «ю» – это точка > . Ю
- 36. Ослабление 4: альтернативные разделители ····· ┌> Американский формат: ММ/ДД/ГГГГ · / · --┤ ····· └> Rus/Lat: ДД/ММ/ГГГГ ? , Если > 12, то точно ДД / . Если оба <= 12, то гадаем…
- 37. Ослабление 4 (продолжение): еще альтернативные разделители ····· ┌> ISO: ГГГГ-ММ-ДД · - · --┤ ····· └> Извращение: ДД-ММ-ГГГГ Если впереди 4 цифры, то ISO
- 38. Ослабление 5: текстовое название месяца 16 фев 76 янв… → 01 Фев… → 02 16 февраля 1976 мар… → 03 … дек… → 12 Анализируем только первые 3 буквы, остальные игнорируем
- 39. Ослабление 6: Не указан год -- текущий год Не указаны год и месяц -- текущие год и месяц Это может быть в районе 90% случаев!!!
- 40. 5) ююю ... • Время • Номер телефона • URL • IP-адрес • … Уже по аналогии легко догадаться
- 41. 6) Визуализация трактовки .......................... . Введите объем поставки . . газа и нажмите Enter . .......................... ------------- | 4,321 | кубометров ------------- ........................ . 4 тыс. 321 кубометр . . газа закачен в трубу . ........................
- 42. Варианты • По мере набора 01ю| 01|ю 01и|ю 01июн| • По уходу фокуса вместе с валидацией есть проблема последнего поля • Доп. шаг с подтверждением иногда это оправдано но редко + лишние действия
- 43. • A la autocomplete (всплывающий хинт под полем) ------------ ------------ | 4 янв 18| | | 24 янв 18| | ------------ ------------ . 04.01.2018 . . 24.01.2018 . .............. . 18.01.2024 . . 24.01.1918 . . 18.01.1924 . ..............
- 44. 7) Продвинутые возможности • Числа: inline-калькулятор достаточно + - * / и скобок • Даты: «+1» – завтра «+7» – через неделю «-1» – вчера «-7» – неделю назад • Строки: автоматический Rus/Lat автоматический регистр
- 45. Поиск в адресной книге Поиск физ. лица Поиск товара Ad hoc анализ строк Будущие интерфейсы для поиска III. УДОБНЫЙ ПОИСК В ОДНОЙ СТРОКЕ
- 46. «Хороший поиск ≡ google»
- 47. Мы же «городим» что-то вроде:
- 48. Препятствия • Полноценный поиск с морфологией до сих пор остается не всем доступной роскошью • Много атрибутов у искомых сущностей • Въевшиеся шаблоны проектирования
- 49. Устоявшийся положительный пример • Поиск контакта в адресной книге – одно поле – ищет по мере набора – строит разные догадки: • ФИО • отдельные части ФИО • E-mail • телефон • «прозвище» • …
- 50. Кстати, у google wave с этим пока не очень…
- 51. Тезисы > Почти любой поиск можно реализовать в одной строке > Глупо показывать 0 результатов поиска – лучше продолжить искать иначе и предлагать догадки > Точность поиска не обязана быть 100% пока результатов не станет слишком много – точность vs полнота
- 52. Тезисы > Между поисками в стиле атр1 = значение & aтр2 LIKE шаблон и полноконтекстным поиском сейчас слабо заполненная ниша
- 53. Объединение ┌--> нескольких | алгоритмов | | | +++++++++++++ | Поиск + ПРИЕМЫ + ----┼--> отдельных +++++++++++++ | элементов | | | └--> Мини-язык
- 54. Пример 1: Поиск физ. лица Бибичев Бибичев А Бибичев А 1976 Андрей 1976-02-16 12 34 567890 987’654 14.11.09
- 55. Пример 2: Поиск товара по названию Детские кроссовочки Adidas коричневого цвета с желтыми шнурками 32 р. Кроссовки детские Adidas кроссовки желтые Коричневые шнурки
- 57. ┌- детск ├- кроссов ├- adidas +++++++++ ├- коричнев + Товар + <---┼- цвет +++++++++ ├- с ├- желт ├- шнурк ├- 32 └- р.
- 58. Пример 3: Поиск issue в YouTrack http://www.jetbrains.com/youtrack/features/search_filter_issues.html
- 59. Спираль развития Про Office 2007 и Mozilla Bespin Про терминалы оплаты Мелочи бывают очень важны IV. ВПЕРЕД В ПРОШЛОЕ
- 60. Спираль развития
- 61. Две истории • Office 2007 vs Mozilla Bespin • Терминалы оплаты
- 62. Пришло время позаботиться о текстовом вводе
- 63. Нюансы и мелочи бывают очень важны