Www.lucrat.net | Мястото на ползваемостта в правенето на сайтове Мястото на ползваемостта в правенето на сайтове 18 февруари 2010 за Виртуално училище. - презентация

1 | Мястото на ползваемостта в правенето на сайтове Мястото на ползваемостта в правенето на сайтове 18 февруари 2010 за Виртуално училище на българските учители Димитър Симов, Лукрат 1

2 | Мястото на ползваемостта в правенето на сайтове Вашият лектор 2 Димитър Симов туитър:

3 | Мястото на ползваемостта в правенето на сайтове Бихте ли си купили тази кола? 3 Източник: About Face 3: The Essentials of Interaction Design, Alan Cooper, Robert Reimann, David Cronin, Wiley, 2007, ISBN:

4 | Мястото на ползваемостта в правенето на сайтове Темите 1.Ползваемост 2.Потребители 3.Тестване с потребители 4.Поглед върху някои училищни сайтове 4

5 | Мястото на ползваемостта в правенето на сайтове Ползваемост 5

6 | Мястото на ползваемостта в правенето на сайтове Ползваемост Качество на продуктите и услугите полезни лесни за ползване и заучаване интуитивни (познати) удовлетворяващи за определени хора (потребители) за определени задачи в определена среда 6

7 | Мястото на ползваемостта в правенето на сайтове7 Ползваемостта еПотребителите Научаемостлесно научават и извършват задачите си Запомняемостбързо възстановяват уменията си след период на неползване Производителностбързо вършат задачите си Резултатноствинаги достигат до успешен резултат Липса на грешкиправят малко грешки и лесно се оправят от тях Удовлетвореностизпитват удоволствие от ползването на сайта

8 | Мястото на ползваемостта в правенето на сайтове Ползваемостта не е Графичен дизайн Технологии Вътрешни мнения 8

9 | Мястото на ползваемостта в правенето на сайтове Ползи от ползваемостта За потребителите приятен, полезен и лесен за ползване сайт За създателите качество на свършената работа по-малко ресурси за поддръжка и преправяне За собствениците по-доволни потребители повече продажби на по-малка цена за поддръжка, преработки, управление и реклама 9

10 | Мястото на ползваемостта в правенето на сайтове Потребители 10

11 | Мястото на ползваемостта в правенето на сайтове За да направим ползваем сайт трябва: Да познаваме потребителите: опит, знания, навици, нужди, задачи, среда, оборудване Да мислим за начина на ползване Да съобразяваме решенията си с нуждите на потребителите 11

12 | Мястото на ползваемостта в правенето на сайтове Потребителите на училищен сайт 12

13 | Мястото на ползваемостта в правенето на сайтове Потребителски изисквания Ако направим сайт за всички: ще има много функционалности и екстри, но няма да покрие изискванията на нито един човек ще има излишни неща, а вероятно и липси За потребителите трябва да знаем нещата, които имат отношение към нашия сайт: предишен опит и навици цели задачи, които имат среда, в която работят очаквания и изисквания 13

14 | Мястото на ползваемостта в правенето на сайтове Обособяване на потребителите Трябва по някакъв начин да фокусираме потребителите. Потребителски групи – хора със сходни характеристики. Примерни потребителски групи на училищен сайт: Родители на кандидат ученици Родители на ученици Ученици в начален или основен курс Ученици в гимназиален курс Учители Учители, търсещи работа Журналисти 14

15 | Мястото на ползваемостта в правенето на сайтове Поглед отблизо Колкото по-персонализирани стават описанията, толкова по-близки и по-разбираеми стават потребителите за нас, толкова по-лесно можем да им предоставим необходимата функционалност и съдържание. 15

16 | Мястото на ползваемостта в правенето на сайтове Майка (родител) на кандидат ученик Цел на потребителя: да избере най-подходящото училище Наша цел: да дадем нужната информация и да представим училището в най-добрата му светлина 16

17 | Мястото на ползваемостта в правенето на сайтове Майка (родител) на ученик Цел на потребителя: да се информира за важните неща за училището и ученето Наша цел: да я държим в течение и уверена, че всичко върви добре 17

18 | Мястото на ползваемостта в правенето на сайтове Учител, търсещ работа Цел на потребителя: да се информира за училището, колегите и условията Наша цел: да му предложим необходимата информация 18

19 | Мястото на ползваемостта в правенето на сайтове Как да ги опознаем и опишем? Опознаване Интервюта Наблюдение в контекст Анализ на съществуващи продукти Описване Профили Образи (personas) Мисловни модели Цикъл на опита 19

20 | Мястото на ползваемостта в правенето на сайтове Тестване с потребители 20

21 | Мястото на ползваемостта в правенето на сайтове След като вече познаваме потребителите, искаме да видим как се справят с нашия сайт. Основната идея на тестването за ползваемост: наблюдаваме потребители, които ползват нашия сайт или негов прототип (бил той и скица на хартия). 21

22 | Мястото на ползваемостта в правенето на сайтове Тестване за ползваемост Проучване, в което участват потребители Провежда се с малко хора: 5 – 6 от група Работи се в индивидуални сесии Помага да се открият проблеми на потребителите пр и ползване на сайта 22

23 | Мястото на ползваемостта в правенето на сайтове Кога се тества за ползваемост? По всяко време. Колкото по-рано, толкова по-добре. Преди проектиране и разработка за опознаване на потребителите По време на проектиране и разработка за проверка на структурата Преди пускане на готовия сайт за потвърждение и изчистване на дребни проблеми По време на живота на сайт за наблюдение и развитие 23

24 | Мястото на ползваемостта в правенето на сайтове Провеждане на тестване за ползваемост Стъпка 1 – План и подготовка Определяне на потребителите и тестовите задачи Подбор на участници и претест Стъпка 2 – Работа с участниците Водещ: дава указания, подканва, спазва неутралност Наблюдател: води записки Софтуер: записва сесията, а позволява и много наблюдатели Стъпка 3 – Резултати и анализ Обработка и обобщаване на данните Проблеми и препоръки 24

25 | Мястото на ползваемостта в правенето на сайтове Съвети за тестване за ползваемост Да Планирайте Подберете подходящи участници Предвидете малко повече участници от необходимото – все се случва някой да не може да се включи Уважавайте участниците Подредете задачите от лесни към трудни Внимавайте задачите да не внушават подход или отговор Подгответе си въпроси Наблегнете на наблюдението - какво правят участниците Карайте участниците да мислят на глас Поканете колегите и ръководството да гледат Подгответе се за промени в сайта 25

26 | Мястото на ползваемостта в правенето на сайтове Съвети за тестване за ползваемост Не Не насочвайте и не помагайте на участниците – оставете ги да говорят със свои думи и да правят нещата по своя си начин Не отговаряйте на въпросите на участниците пряко, питайте ги какво мислят те Не използвайте специфична терминология Не задавайте въпроса Защо пряко: Вместо "Защо цъкна там?" попитайте "Какво очакваше да стане, когато цъкна там?" Не мислете участниците за глупави ако не разбират сайта или негова част: проблемът е по скоро в сайта 26

27 | Мястото на ползваемостта в правенето на сайтове Поглед върху училищни сайтове 27

28 | Мястото на ползваемостта в правенето на сайтове Елементи с най-силно влияние Най-съществено влияение върху ползваемостта оказват: Начална страница – трябва да представя сайта и да води към съдържание от вътрешността Навигация (меню) – трябва да разкрива структурата и да дава достъп различните дялове Връзки – трябва да са разпознаваеми и да указват къде ще отидат потребителите Съдържание (текст) – трябва да е ясно, възможно най-кратко и лесно за четене и възприемане 28

29 | Мястото на ползваемостта в правенето на сайтове НАЧАЛНА СТРАНИЦА 29

30 | Мястото на ползваемостта в правенето на сайтове 1 СОУ Пенчо Славейков, София Хубави снимки. Носят силен заряд. Създават настроение. Нулева информационна стойност. Ниска навигационна стойност – каквото и да искаш да направиш трябва да минеш през входа. Физическият вход на училището носи много повече информация 30

31 | Мястото на ползваемостта в правенето на сайтове Вход на 1 СОУ Пенчо Славейков, София Казва името и номера на училището. Явно показва откъде се влиза. Видът на сградата подсказва старост. Изнесена е важна информация на преден план – плакатът за 130 годишнина. Ако снимката беше малко по-широка щеше да се вижда и барелеф на патрона – Пенчо Славейков. 31

32 | Мястото на ползваемостта в правенето на сайтове Христо Ботев, Девин Ясно се казва какво представлява сайта. Има кратко описание на учлищието – а има и снимка в горния десен ъгъл. Предвидено е място за Важни съобщения (такива в момента няма). 32

33 | Мястото на ползваемостта в правенето на сайтове НГДЕК Константин Кирил Философ Богата на съдържание начална страница. Каро изнася много съдържание напред сайтът улеснява потребителите. Многото съдържание може да е прекалено – тестване с потребители би показало дали съдържанието тук не трябва да се намали. 33

34 | Мястото на ползваемостта в правенето на сайтове Препоръки за началната страница Във видимата част на началната страница сложете кратко представяне на сайта и неговото предназначение. Представете важните или най-търсени съдържание и функционалности с препратки навътре в сайта. Поставете акценти, но умерено – за да може сканиращото око лесно да ги засече. Не претрупвайте с много съдържание. Не прекалявайте с цветове, форми и движение. 34

35 | Мястото на ползваемостта в правенето на сайтове НАВИГАЦИЯ (МЕНЮ) 35

36 | Мястото на ползваемостта в правенето на сайтове Първа частна английска гимназия Менюто е на три реда. Слива се с текста в главата. Третият ред е всъщност под-меню. На снимката е показано подменюто на елемента училището. Видима връзка между двете липсва. 36

37 | Мястото на ползваемостта в правенето на сайтове 138 СОУ Проф. Васил Златарски, София Съвършено различна структура и различно меню. Подменюта на някои места. Странно действие. При цък на История на 138 СОУ, нормалното очакване е да се отвори страница с текст. Отваря се празна страница с една връзка към файл. 37

38 | Мястото на ползваемостта в правенето на сайтове 1 СОУ Пенчо Славейков, София Вертикално меню. Отново различна структура. Изнанадващо действие на елемента - отваря празно писмо в пощенската ви програма. 38

39 | Мястото на ползваемостта в правенето на сайтове Препоръки за навигацията Осигурете еднаквост на действието на елементите от менюто – неочакваното обърква Когато използвате подменюта подскажете на потребителите чрез графичния дизайн връзката между главното меню и под-менютата Търсете имена за елементите на менютата, които са стандартни и лесно разпознаваеми - потребителите познават другите сайтове, не вашия 39

40 | Мястото на ползваемостта в правенето на сайтове ВРЪЗКИ 40

41 | Мястото на ползваемостта в правенето на сайтове 1 СОУ Пенчо Славейков, София Връзките се казват "тук". Лоша практика: 1. Само от името на връзката не се разбира къде сочи тя, трябва да се чете съседния текст 2. Трудни за улучване Вместо ВНИМАНИЕ! Информация за новите ни кандидат-първокласници вижте тук.тук По-добре ВНИМАНИЕ! Информация за новите ни кандидат-първокласници. Информация за новите ни кандидат-първокласници 41

42 | Мястото на ползваемостта в правенето на сайтове 138 СОУ Проф. Васил Златарски, София Някои неща са връзки, други не са Връзките се разпознават трудно – всичко е в еднакъв тъмночервен цвят. Птребителите трябва да обикалят с мишката, за да разберат кое е връзка и кое не. 42

43 | Мястото на ползваемостта в правенето на сайтове НГДЕК Константин Кирил Философ Връзките са сини и подчертани – лесни за разпознаване. Посетените връзки са сиви – личи, че са посетени. Това улеснаява потребителите. 43

44 | Мястото на ползваемостта в правенето на сайтове Препоръки за връзките Използвайте еднакъв цвят за всички връзки. Подчертавайте връзките. Не подчертавайте нищо друго. Използвайте различен цвят за посетените и непосетените връзки. Използвайте дълги и описателни имена на връзките. Ясно обозначавайте връзки, които сочат към файлове или имейлски адреси. 44

45 | Мястото на ползваемостта в правенето на сайтове СЪДЪРЖАНИЕ (ТЕКСТ) 45

46 | Мястото на ползваемостта в правенето на сайтове 1 СОУ Пенчо Славейков, София Отдлените новини са трудно отличими. Текстът е изцяло удебелен - трудно се разбира кое е важното. Снимката не е свързана смислово с новините. 46

47 | Мястото на ползваемостта в правенето на сайтове СОУ Васил Левски, Вятово Текст като стена. Не диша. Труден за четене, труден за сканиране. За да се разбере важното, трябва да се прочете всичко. Заглавието е подчертано: в интернет, подчертано значи връзка. 47

48 | Мястото на ползваемостта в правенето на сайтове Професионална гимназия Иван Илиев, Благоевград Снимките разчупват текста. Празното пространство между абзаците увеличава сканируемостта (способността за обхождане). Текстът е прекалено широк, за да се събере в рамките на екрана, когато екранът е по-тесен. 48

49 | Мястото на ползваемостта в правенето на сайтове Препоръки за съдържанието (текста) Пишете възможно най-кратко: текстът е готов, когато няма какво да махате. Казвайте важното в началото на страницата и в началото на абзаца - това са нещата, които е най-вероятно да бъдат прочетени Осигурявайте много празно (бяло) в текста. Използвайте картинки ил иизвадки. Удебелявайте важното, но пестеливо. Когато всичко е удебелено, нищо не изглежда важно. 49

50 | Мястото на ползваемостта в правенето на сайтове Последна препоръка Тествайте с потребители. 50

51 | Мястото на ползваемостта в правенето на сайтове Специално предложение Включете се в курс на Лукрат с 20% намаление: февруари 2010, Писане за уеб. Научете как да подобрите текстовете във вашия сайт март 2010, Как да правим сайтовете лесни за ползване? Научете как да направите сайта си по-практичен и по-удобен за вашите потребители. Свържете се с Димитър Симов: и

52 | Мястото на ползваемостта в правенето на сайтове Първата организация в България, предлагаща професионални услуги по ползваемост за сайтове, уеб услуги и софтуерни продукти. Помагаме на всички да правят полезни и лесни сайтове, продукти и услуги. 52