Правила хорошего тонадля веб-приложенийНикита Прокоповtonsky.livejournal.comНовосибирск, 2011
Что есть хороший тон?∙ Нарушение не смертельно;∙ Распространено;∙ Происходит по незнанию или недосмотру,  а не по объектив...
Глава 1.Не хамите
Никогда не держитепользователя за дурака
Никогда не держитепользователя за дурака
Никогда не держитепользователя за дурака
Сначала покажите, что у вас естьhttp://afisha.ru/
Сначала покажите, что у вас есть
Не спрашивайте лишнего
Представьтесь самиhttp://typekit.com/about
Не заставляйте ждать
Не теряйте введенные данные
Не обвиняйте пользователя
Не обвиняйте пользователяhttp://www.brilance.com/
Не обвиняйте пользователя
Глава 2.Будьте внимательны
Объясните, покажите, обслужите                  Где я?                  Зачем это все?                  Зачем это мне?    ...
Объясните, покажите, обслужите
Помните своих гостейhttp://lleo.me/dnevnik/
Помните своих гостейhttp://mvideo-bonus.ru/rules/
Автоопределяйте данныеКакая это страна?   ru_RU.UTF-8Где я?              Novosibirsk, RussiaКакой сейчас год?   UTC+7
Показывайте время в часовомпоясе клиентаhttp://rally1.rallydev.com/
Глава 3.Оформление элементов страницы
Используйте элементыпо назначению                        On English  Удалить               По-русски  http://google.com   ...
Оформляйте традиционноhttp://okcancel.com/comic/4.html
Убирайте клипарт и изображенияне по делу
Не дайте потеряться содержаниюhttp://blog.barrier.ru/
Текст должен читаться
Делайте это красиво
Глава 4.Язык твой — друг твой
Пишите грамотно
Уважайте региональные стандарты  $100                 100 руб.  1/25/11              25.1.11  =10,500.25           =10 500...
Пишите для человекаДата: 2011.01.25Кол-во товаров: 4Кол-во взрослых:           2Кол-во детей до 3-х лет:   0Наличие холоди...
Пишите для человека25 января 2011-гоВ корзине 4 товараНомер на двоих взрослых схолодильником и кондиционером
Не заставляйте читать
Говорите на языке пользователяhttp://ru.xored.com/blogs/
Будьте конструктивнымиhttp://facebook.com/
НЕ КРИЧИТЕ!http://ux.stackexchange.com/
Иногда лучше словамиhttp://bitbucket.org/
Title — объясняйтеhttp://livejournal.com
Будьте человечнымиОдну минуточку...
Будьте человечными
Глава 5.Готовим Аякс
Используйте его.
Показывайте, что запрос ушел
Обновляйте URL и Title
Глава 6.Подружитесь с браузером
URL любой страницы можноскопировать и передать кому-то+ Прямо из строки браузера+ Не протухнет+ Все увидят одно и то же
Не отвечайте страницей на POST
Не обязательно прекрасные,но полезные URL-ыhttp://user45.site.com/cat12/art56.html
Каждой странице свой Title
Кнопка ← должна работать
Дайте ссылаться внутрьhttp://artlebedev.ru/kovodstvo/172
Подстраивайтесь под устройствоhttp://www.dropbox.com/...
Глава 8.Думайте сами, решайте сами
Не структурируйте напрасно
Не делайте пейджингаискусственноhttp://technocity.ru/
Оповещайте об ошибкахавтоматическиhttp://twurn.com/500
Ищите с учетом материала
Глава 9.Мойте руки перед кодированием
Используйте UTF–8
Работайте быстро+ минификация+ объединение+ gzip+ Expires & ETag
Не суетитесь+ фикс. размеры блоков+ фикс. элементы управления+ укажите размеры img
Подумайте о хакерахhttp://stylebot.me/
Подумайте о хакерахhttp://instapaper.com/u
Никита Прокоповtonsky.livejournal.com
Upcoming SlideShare
Loading in …5
×

Правила хорошего тона для веб-приложений

4,513 views

Published on

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,513
On SlideShare
0
From Embeds
0
Number of Embeds
2,973
Actions
Shares
0
Downloads
3
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Правила хорошего тона для веб-приложений

  1. 1. Правила хорошего тонадля веб-приложенийНикита Прокоповtonsky.livejournal.comНовосибирск, 2011
  2. 2. Что есть хороший тон?∙ Нарушение не смертельно;∙ Распространено;∙ Происходит по незнанию или недосмотру, а не по объективным причинам.
  3. 3. Глава 1.Не хамите
  4. 4. Никогда не держитепользователя за дурака
  5. 5. Никогда не держитепользователя за дурака
  6. 6. Никогда не держитепользователя за дурака
  7. 7. Сначала покажите, что у вас естьhttp://afisha.ru/
  8. 8. Сначала покажите, что у вас есть
  9. 9. Не спрашивайте лишнего
  10. 10. Представьтесь самиhttp://typekit.com/about
  11. 11. Не заставляйте ждать
  12. 12. Не теряйте введенные данные
  13. 13. Не обвиняйте пользователя
  14. 14. Не обвиняйте пользователяhttp://www.brilance.com/
  15. 15. Не обвиняйте пользователя
  16. 16. Глава 2.Будьте внимательны
  17. 17. Объясните, покажите, обслужите Где я? Зачем это все? Зачем это мне? Что посмотреть? Что делать дальше? ...
  18. 18. Объясните, покажите, обслужите
  19. 19. Помните своих гостейhttp://lleo.me/dnevnik/
  20. 20. Помните своих гостейhttp://mvideo-bonus.ru/rules/
  21. 21. Автоопределяйте данныеКакая это страна? ru_RU.UTF-8Где я? Novosibirsk, RussiaКакой сейчас год? UTC+7
  22. 22. Показывайте время в часовомпоясе клиентаhttp://rally1.rallydev.com/
  23. 23. Глава 3.Оформление элементов страницы
  24. 24. Используйте элементыпо назначению On English Удалить По-русски http://google.com О компании Редактировать Отправить
  25. 25. Оформляйте традиционноhttp://okcancel.com/comic/4.html
  26. 26. Убирайте клипарт и изображенияне по делу
  27. 27. Не дайте потеряться содержаниюhttp://blog.barrier.ru/
  28. 28. Текст должен читаться
  29. 29. Делайте это красиво
  30. 30. Глава 4.Язык твой — друг твой
  31. 31. Пишите грамотно
  32. 32. Уважайте региональные стандарты $100 100 руб. 1/25/11 25.1.11 =10,500.25 =10 500,25
  33. 33. Пишите для человекаДата: 2011.01.25Кол-во товаров: 4Кол-во взрослых: 2Кол-во детей до 3-х лет: 0Наличие холодильника: даНаличие кондиционера: да
  34. 34. Пишите для человека25 января 2011-гоВ корзине 4 товараНомер на двоих взрослых схолодильником и кондиционером
  35. 35. Не заставляйте читать
  36. 36. Говорите на языке пользователяhttp://ru.xored.com/blogs/
  37. 37. Будьте конструктивнымиhttp://facebook.com/
  38. 38. НЕ КРИЧИТЕ!http://ux.stackexchange.com/
  39. 39. Иногда лучше словамиhttp://bitbucket.org/
  40. 40. Title — объясняйтеhttp://livejournal.com
  41. 41. Будьте человечнымиОдну минуточку...
  42. 42. Будьте человечными
  43. 43. Глава 5.Готовим Аякс
  44. 44. Используйте его.
  45. 45. Показывайте, что запрос ушел
  46. 46. Обновляйте URL и Title
  47. 47. Глава 6.Подружитесь с браузером
  48. 48. URL любой страницы можноскопировать и передать кому-то+ Прямо из строки браузера+ Не протухнет+ Все увидят одно и то же
  49. 49. Не отвечайте страницей на POST
  50. 50. Не обязательно прекрасные,но полезные URL-ыhttp://user45.site.com/cat12/art56.html
  51. 51. Каждой странице свой Title
  52. 52. Кнопка ← должна работать
  53. 53. Дайте ссылаться внутрьhttp://artlebedev.ru/kovodstvo/172
  54. 54. Подстраивайтесь под устройствоhttp://www.dropbox.com/...
  55. 55. Глава 8.Думайте сами, решайте сами
  56. 56. Не структурируйте напрасно
  57. 57. Не делайте пейджингаискусственноhttp://technocity.ru/
  58. 58. Оповещайте об ошибкахавтоматическиhttp://twurn.com/500
  59. 59. Ищите с учетом материала
  60. 60. Глава 9.Мойте руки перед кодированием
  61. 61. Используйте UTF–8
  62. 62. Работайте быстро+ минификация+ объединение+ gzip+ Expires & ETag
  63. 63. Не суетитесь+ фикс. размеры блоков+ фикс. элементы управления+ укажите размеры img
  64. 64. Подумайте о хакерахhttp://stylebot.me/
  65. 65. Подумайте о хакерахhttp://instapaper.com/u
  66. 66. Никита Прокоповtonsky.livejournal.com

×