1. Правила хорошего тона
для веб-приложений
Никита Прокопов
tonsky.livejournal.com
Новосибирск, 2011

2. Что есть хороший тон?
∙ Нарушение не смертельно;
∙ Распространено;
∙ Происходит по незнанию или недосмотру,
а не по объективным причинам.

3. Глава 1.
Не хамите

4. Никогда не держите
пользователя за дурака

5. Никогда не держите
пользователя за дурака

6. Никогда не держите
пользователя за дурака

7. Сначала покажите, что у вас есть
http://afisha.ru/

8. Сначала покажите, что у вас есть

9. Не спрашивайте лишнего

10. Представьтесь сами
http://typekit.com/about

11. Не заставляйте ждать

12. Не теряйте введенные данные

13. Не обвиняйте пользователя

14. Не обвиняйте пользователя
http://www.brilance.com/

15. Не обвиняйте пользователя

16. Глава 2.
Будьте внимательны

17. Объясните, покажите, обслужите
Где я?
Зачем это все?
Зачем это мне?
Что посмотреть?
Что делать дальше?
...

18. Объясните, покажите, обслужите

19. Помните своих гостей
http://lleo.me/dnevnik/

20. Помните своих гостей
http://mvideo-bonus.ru/rules/

21. Автоопределяйте данные
Какая это страна? ru_RU.UTF-8
Где я? Novosibirsk, Russia
Какой сейчас год? UTC+7

22. Показывайте время в часовом
поясе клиента
http://rally1.rallydev.com/

23. Глава 3.
Оформление элементов страницы

24. Используйте элементы
по назначению
On English
Удалить По-русски
http://google.com О компании
Редактировать Отправить

25. Оформляйте традиционно
http://okcancel.com/comic/4.html

26. Убирайте клипарт и изображения
не по делу

27. Не дайте потеряться содержанию
http://blog.barrier.ru/

28. Текст должен читаться

29. Делайте это красиво

30. Глава 4.
Язык твой — друг твой

31. Пишите грамотно

32. Уважайте региональные стандарты
$100 100 руб.
1/25/11 25.1.11
=10,500.25 =10 500,25

33. Пишите для человека
Дата: 2011.01.25
Кол-во товаров: 4
Кол-во взрослых: 2
Кол-во детей до 3-х лет: 0
Наличие холодильника: да
Наличие кондиционера: да

34. Пишите для человека
25 января 2011-го
В корзине 4 товара
Номер на двоих взрослых с
холодильником и кондиционером

35. Не заставляйте читать

36. Говорите на языке пользователя
http://ru.xored.com/blogs/

37. Будьте конструктивными
http://facebook.com/

38. НЕ КРИЧИТЕ!
http://ux.stackexchange.com/

39. Иногда лучше словами
http://bitbucket.org/

40. Title — объясняйте
http://livejournal.com

41. Будьте человечными
Одну минуточку...

42. Будьте человечными

43. Глава 5.
Готовим Аякс

44. Используйте его.

45. Показывайте, что запрос ушел

46. Обновляйте URL и Title

47. Глава 6.
Подружитесь с браузером

48. URL любой страницы можно
скопировать и передать кому-то
+ Прямо из строки браузера
+ Не протухнет
+ Все увидят одно и то же

49. Не отвечайте страницей на POST

50. Не обязательно прекрасные,
но полезные URL-ы
http://user45.site.com/cat12/art56.html

51. Каждой странице свой Title

52. Кнопка ← должна работать

53. Дайте ссылаться внутрь
http://artlebedev.ru/kovodstvo/172

54. Подстраивайтесь под устройство
http://www.dropbox.com/...

55. Глава 8.
Думайте сами, решайте сами

56. Не структурируйте напрасно

57. Не делайте пейджинга
искусственно
http://technocity.ru/

58. Оповещайте об ошибках
автоматически
http://twurn.com/500

59. Ищите с учетом материала

60. Глава 9.
Мойте руки перед кодированием

61. Используйте UTF–8

62. Работайте быстро
+ минификация
+ объединение
+ gzip
+ Expires & ETag

63. Не суетитесь
+ фикс. размеры блоков
+ фикс. элементы управления
+ укажите размеры img

64. Подумайте о хакерах
http://stylebot.me/

65. Подумайте о хакерах
http://instapaper.com/u

66. Никита Прокопов
tonsky.livejournal.com