О текстовом вводе замолвите слово

1,630 views
1,561 views

Published on

Презентация для конференции WUD-2009, прошедшей 14 ноября в Москве

Published in: Technology, Design
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
1,630
On SlideShare
0
From Embeds
0
Number of Embeds
182
Actions
Shares
0
Downloads
40
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

О текстовом вводе замолвите слово

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

×