Мястото на ползваемостта в правенето на сайтове 18 февруари 2010 за Виртуално училище на българските учители www.teacher.bg Димитър Симов

Содержание

Слайд 2

Вашият лектор Димитър Симов jimmy@lucrat.net 0885 909 927 туитър: @туитър: @dsimov

Вашият лектор

Димитър Симов
jimmy@lucrat.net
0885 909 927
туитър: @туитър: @dsimov

Слайд 3

Бихте ли си купили тази кола? Източник: About Face 3: The

Бихте ли си купили тази кола?

Източник: About Face 3: The Essentials

of Interaction Design,
Alan Cooper, Robert Reimann, David Cronin, Wiley, 2007, ISBN: 0470084111
Слайд 4

Темите Ползваемост Потребители Тестване с потребители Поглед върху някои училищни сайтове

Темите
Ползваемост
Потребители
Тестване с потребители
Поглед върху някои училищни сайтове

Слайд 5

Ползваемост

Ползваемост

Слайд 6

Ползваемост Качество на продуктите и услугите полезни лесни за ползване и

Ползваемост

Качество на продуктите и услугите
полезни
лесни за ползване и заучаване
интуитивни (познати)
удовлетворяващи
за

определени хора (потребители)
за определени задачи
в определена среда
Слайд 7

Слайд 8

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

Ползваемостта не е

Графичен дизайн
Технологии
Вътрешни мнения

Слайд 9

Ползи от ползваемостта За потребителите приятен, полезен и лесен за ползване

Ползи от ползваемостта

За потребителите
приятен, полезен и лесен за ползване сайт
За

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

Потребители

Потребители

Слайд 11

За да направим ползваем сайт трябва: Да познаваме потребителите: опит, знания,

За да направим ползваем сайт трябва:

Да познаваме потребителите: опит, знания, навици,

нужди, задачи, среда, оборудване
Да мислим за начина на ползване
Да съобразяваме решенията си с нуждите на потребителите
Слайд 12

Потребителите на училищен сайт

Потребителите на училищен сайт

Слайд 13

Потребителски изисквания Ако направим сайт за всички: ще има много функционалности

Потребителски изисквания

Ако направим сайт за всички:
ще има много функционалности и екстри,

но няма да покрие изискванията на нито един човек
ще има излишни неща, а вероятно и липси
За потребителите трябва да знаем нещата, които имат отношение към нашия сайт:
предишен опит и навици
цели
задачи, които имат
среда, в която работят
очаквания и изисквания
Слайд 14

Обособяване на потребителите Трябва по някакъв начин да фокусираме потребителите. Потребителски

Обособяване на потребителите

Трябва по някакъв начин да фокусираме потребителите.
Потребителски групи –

хора със сходни характеристики.
Примерни потребителски групи на училищен сайт:
Родители на кандидат ученици
Родители на ученици
Ученици в начален или основен курс
Ученици в гимназиален курс
Учители
Учители, търсещи работа
Журналисти
Слайд 15

Поглед отблизо Колкото по-персонализирани стават описанията, толкова по-близки и по-разбираеми стават

Поглед отблизо

Колкото по-персонализирани стават описанията, толкова по-близки и по-разбираеми стават потребителите

за нас, толкова по-лесно можем да им предоставим необходимата функционалност и съдържание.
Слайд 16

Майка (родител) на кандидат ученик Цел на потребителя: да избере най-подходящото

Майка (родител) на кандидат ученик

Цел на потребителя: да избере най-подходящото училище
Наша цел: да

дадем нужната информация и да представим училището в най-добрата му светлина
Слайд 17

Майка (родител) на ученик Цел на потребителя: да се информира за

Майка (родител) на ученик

Цел на потребителя: да се информира за важните неща

за училището и ученето
Наша цел: да я държим в течение и уверена, че всичко върви добре
Слайд 18

Учител, търсещ работа Цел на потребителя: да се информира за училището,

Учител, търсещ работа

Цел на потребителя: да се информира за училището, колегите и

условията
Наша цел: да му предложим необходимата информация
Слайд 19

Как да ги опознаем и опишем? Опознаване Интервюта Наблюдение в контекст

Как да ги опознаем и опишем?

Опознаване
Интервюта
Наблюдение в контекст
Анализ на съществуващи продукти
Описване
Профили
Образи

(personas)
Мисловни модели
Цикъл на опита
Слайд 20

Тестване с потребители

Тестване с потребители

Слайд 21

След като вече познаваме потребителите, искаме да видим как се справят

След като вече познаваме потребителите, искаме да видим как се справят

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

Тестване за ползваемост Проучване, в което участват потребители Провежда се с

Тестване за ползваемост

Проучване, в което участват потребители
Провежда се с малко хора:

5 – 6 от група
Работи се в индивидуални сесии
Помага да се открият проблеми на потребителите при ползване на сайта
Слайд 23

Кога се тества за ползваемост? По всяко време. Колкото по-рано, толкова

Кога се тества за ползваемост?

По всяко време. Колкото по-рано, толкова по-добре.
Преди

проектиране и разработка за опознаване на потребителите
По време на проектиране и разработка за проверка на структурата
Преди пускане на готовия сайт за потвърждение и изчистване на дребни проблеми
По време на живота на сайт за наблюдение и развитие
Слайд 24

Провеждане на тестване за ползваемост Стъпка 1 – План и подготовка

Провеждане на тестване за ползваемост

Стъпка 1 – План и подготовка
Определяне на

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

Съвети за тестване за ползваемост Да Планирайте Подберете подходящи участници Предвидете

Съвети за тестване за ползваемост

Да
Планирайте
Подберете подходящи участници
Предвидете малко повече участници

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

Съвети за тестване за ползваемост Не Не насочвайте и не помагайте

Съвети за тестване за ползваемост

Не
Не насочвайте и не помагайте на участниците

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

Поглед върху училищни сайтове

Поглед върху училищни сайтове

Слайд 28

Елементи с най-силно влияние Най-съществено влияение върху ползваемостта оказват: Начална страница

Елементи с най-силно влияние

Най-съществено влияение върху ползваемостта оказват:
Начална страница – трябва

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

НАЧАЛНА СТРАНИЦА

НАЧАЛНА СТРАНИЦА

Слайд 30

1 СОУ Пенчо Славейков , София Хубави снимки. Носят силен заряд.

1 СОУ Пенчо Славейков , София

Хубави снимки. Носят силен заряд. Създават

настроение.
Нулева информационна стойност.
Ниска навигационна стойност – каквото и да искаш да направиш трябва да минеш през входа.
Физическият вход на училището носи много повече информация

http://www.1sousofia.org/

Слайд 31

Вход на 1 СОУ Пенчо Славейков , София Казва името и

Вход на 1 СОУ Пенчо Славейков , София

Казва името и номера

на училището. Явно показва откъде се влиза.
Видът на сградата подсказва старост.
Изнесена е важна информация на преден план – плакатът за 130 годишнина.
Ако снимката беше малко по-широка щеше да се вижда и барелеф на патрона – Пенчо Славейков.
Слайд 32

Христо Ботев, Девин Ясно се казва какво представлява сайта. Има кратко

Христо Ботев, Девин

Ясно се казва какво представлява сайта.
Има кратко описание на

учлищието – а има и снимка в горния десен ъгъл.
Предвидено е място за Важни съобщения (такива в момента няма).

http://soudevin.com/default.aspx

Слайд 33

НГДЕК Константин Кирил Философ Богата на съдържание начална страница. Каро изнася

НГДЕК Константин Кирил Философ

Богата на съдържание начална страница.
Каро изнася много

съдържание напред сайтът улеснява потребителите.
Многото съдържание може да е прекалено – тестване с потребители би показало дали съдържанието тук не трябва да се намали.

www.ngdek.com/

Слайд 34

Препоръки за началната страница Във видимата част на началната страница сложете

Препоръки за началната страница

Във видимата част на началната страница сложете кратко

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

НАВИГАЦИЯ (МЕНЮ)

НАВИГАЦИЯ (МЕНЮ)

Слайд 36

Първа частна английска гимназия Менюто е на три реда. Слива се

Първа частна английска гимназия

Менюто е на три реда. Слива се с

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

www.fpels.ws

Слайд 37

138 СОУ Проф. Васил Златарски, София Съвършено различна структура и различно

138 СОУ Проф. Васил Златарски, София

Съвършено различна структура и различно меню.


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

www.138sou.com

Слайд 38

1 СОУ Пенчо Славейков , София Вертикално меню. Отново различна структура.

1 СОУ Пенчо Славейков , София

Вертикално меню. Отново различна структура.
Изнанадващо

действие на елемента e-mail - отваря празно писмо в пощенската ви програма.

http://www.1sousofia.org/

Слайд 39

Препоръки за навигацията Осигурете еднаквост на действието на елементите от менюто

Препоръки за навигацията

Осигурете еднаквост на действието на елементите от менюто –

неочакваното обърква
Когато използвате подменюта подскажете на потребителите чрез графичния дизайн връзката между главното меню и под-менютата
Търсете имена за елементите на менютата, които са стандартни и лесно разпознаваеми - потребителите познават другите сайтове, не вашия
Слайд 40

ВРЪЗКИ

ВРЪЗКИ

Слайд 41

1 СОУ Пенчо Славейков , София Връзките се казват "тук". Лоша

1 СОУ Пенчо Славейков , София

Връзките се казват "тук". Лоша практика:
1.

Само от името на връзката не се разбира къде сочи тя, трябва да се чете съседния текст
2. Трудни за улучване
Вместо ВНИМАНИЕ! Информация за новите ни кандидат-първокласници вижте тук.
По-добре ВНИМАНИЕ! Информация за новите ни кандидат-първокласници.

http://www.1sousofia.org/

Слайд 42

138 СОУ Проф. Васил Златарски, София Някои неща са връзки, други

138 СОУ Проф. Васил Златарски, София

Някои неща са връзки, други не

са
Връзките се разпознават трудно – всичко е в еднакъв тъмночервен цвят.
Птребителите трябва да обикалят с мишката, за да разберат кое е връзка и кое не.

www.138sou.com

Слайд 43

НГДЕК Константин Кирил Философ Връзките са сини и подчертани – лесни

НГДЕК Константин Кирил Философ

Връзките са сини и подчертани – лесни за

разпознаване.
Посетените връзки са сиви – личи, че са посетени. Това улеснаява потребителите.

www.ngdek.com/

Слайд 44

Препоръки за връзките Използвайте еднакъв цвят за всички връзки. Подчертавайте връзките.

Препоръки за връзките

Използвайте еднакъв цвят за всички връзки.
Подчертавайте връзките. Не подчертавайте

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

СЪДЪРЖАНИЕ (ТЕКСТ)

СЪДЪРЖАНИЕ (ТЕКСТ)

Слайд 46

1 СОУ Пенчо Славейков , София Отдлените новини са трудно отличими.

1 СОУ Пенчо Славейков , София

Отдлените новини са трудно отличими.
Текстът е

изцяло удебелен -трудно се разбира кое е важното.
Снимката не е свързана смислово с новините.

http://www.1sousofia.org/

Слайд 47

СОУ Васил Левски, Вятово Текст като стена. Не диша. Труден за

СОУ Васил Левски, Вятово

Текст като стена. Не диша. Труден за четене,

труден за сканиране.
За да се разбере важното, трябва да се прочете всичко.
Заглавието е подчертано: в интернет, подчертано значи връзка.

http://sou-vetovo.org/aboutus.aspx

Слайд 48

Професионална гимназия Иван Илиев, Благоевград Снимките разчупват текста. Празното пространство между

Професионална гимназия Иван Илиев, Благоевград

Снимките разчупват текста.
Празното пространство между абзаците

увеличава сканируемостта (способността за обхождане).
Текстът е прекалено широк, за да се събере в рамките на екрана, когато екранът е по-тесен.

http://pgiblg.com/

Слайд 49

Препоръки за съдържанието (текста) Пишете възможно най-кратко: текстът е готов, когато

Препоръки за съдържанието (текста)

Пишете възможно най-кратко: текстът е готов, когато няма

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

Последна препоръка Тествайте с потребители.

Последна препоръка

Тествайте с потребители.

Слайд 51

Специално предложение Включете се в курс на Лукрат с 20% намаление:

Специално предложение

Включете се в курс на Лукрат с 20% намаление:
23-24 февруари

2010, Писане за уеб.
Научете как да подобрите текстовете във вашия сайт. www.lucrat.net/courses/u3101_bg/
23-24 март 2010, Как да правим сайтовете лесни за ползване?
Научете как да направите сайта си по-практичен и по-удобен за вашите потребители. www.lucrat.net/courses/u2102_bg/
Свържете се с Димитър Симов: jimmy@lucrat.net и 0885 909 927