Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Правила хорошего тонадля веб-приложенийНикита Прокопов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
×

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

6,233 views

Published on

Published in: Design
  • Be the first to comment

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

  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

×