Дизайн и ергономичност на интерфейсите на мобилните приложения
1. Изображенията подобряват разбирането, но не са достатъчни сами по себе си, за да представят нещо. Представяне на изображения чрез фонови CSS свойства или други методи. Използвайте тагове, за да посочите типа съдържание: например em за подчертаване или abbr за съкращение. Вижте www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage 2 за подробен списък с тагове. Използвайте етикета div само за подчертаване на големи блокове от материал, които са свързани един с друг. За да маркирате отделни параграфи, използвайте специални тагове: ul за списъци с водещи символи, span за маркиране на малки блокове от съдържание. 3. Не забравяйте, че семантичният уеб е начин за организиране на съдържание и няма нищо общо със стила.
2. Ясно формулирайте задачата
3. Избягвайте препълването!
Не се опитвайте да запълните всички празни места на екрана. Всички потребители имат различни скорости на връзка, така че сайтът не трябва да "тежи" твърде много. Излишъкът от изображения, текст, код и т.н. не само влошава потребителското изживяване на сайта, но и значително увеличава времето за зареждане. Ефективността е важна за потребителите на мобилен интернет: те не седят пред компютъра и имат нужда от достъп до конкретен сайт, за да решат спешни проблеми.
1. Ограничете броя на изображенията в мобилната версия на сайта до минимум. 2. Не включвайте в мобилната версия на сайтаголеми текстове. 3. Олекотете кода си, като използвате семантично маркиране и минимизирате броя на CSS стиловете и вложените файлове.
4. Не използвайте подчертано състояние!
Навигирането с пръст или стилус е много различно от навигирането с мишка и изисква повече изобретателност от разработчика. Трябва да използвате графични инструменти, за да демонстрирате на потребителя способността да контролира този или онзи елемент.
1. Използвайте бутони за маркиране на връзки, а не за подчертаване на текст. 2. Използвайте стрелките, за да посочите достъп до по-подробно съдържание. 3. В дизайна на бутоните използвайте засенчване и релефни линии. 4. Използвайте познати и ясни икони. Избягвайте непознати икони за обозначаване на типове действия (добавяне, промяна, назад, напред и т.н.)
5. Пишете с голям шрифт, просто и ясно
Дори на малък екран потребителят не трябва да има проблем с четенето на текст. Ако оптималният размер на шрифта за показване на голям екран е 14 точки, то за мобилно устройство той трябва да е поне два пъти по-голям. Трябва обаче да се има предвид, че колкото по-голям е шрифтът, толкова по-малко информация може да бъде поставена на сайта.
1. Мобилната версия на сайта не трябва да включва допълнителна информация. 2. Подбирайте текстове с малък обем, написани на прост и разбираем език. 3. Не използвайте функцията за превъртане, освен ако не е абсолютно необходимо. 4. Включете бутон „напред“ в дизайна на уебсайта си, който ще отведе потребителя до екран с по-подробен текст.
6. Използвайте елементи на съдържанието на сайта в навигацията
От особен интерес при създаването на версии на сайтове, адаптирани към сензорния екран, е възможността за използване на елементи на съдържание като елементи за навигация: натискането на пръст върху една или друга област на екрана вече може да се превърне в инструмент за извършване на едно или друго действие. В мобилните версии на сайта не е необходимо да използвате например лента за превъртане: самият екран ще поеме неговите функции.
1. Използвайте списъците с менюта, за да навигирате до подменюта или други екрани. 2. Проектирайте сайта си като галерия от екрани; Бъдете креативни с начина, по който посетителите преминават през тази виртуална галерия.
7. Обърнете внимание на цветовете
8. В общия стил на сайта основното е простотата
Както визуалното решение на сайта, така и неговото текстово съдържание трябва да се характеризират с простота и яснота. В дизайна на мобилната версия на сайта трябва да се избягват екстравагантни, нетрадиционни елементи. Използвайте общи думи, чието значение ще бъде ясно разбрано от всички (например „потребителско име“ и „парола“, а не „псевдоним“ и „таен код“).
9. Осигурете възможност за обратна връзка
Мобилните браузъри поддържат Java - възползвайте се от тях и дайте на потребителите си динамична обратна връзка. Можете например да покажете напредъка на зареждането на страницата с помощта на анимация. Ако потребителят е забравил да попълни някое поле, незабавно го информирайте за това. Създайте разговорпрозорци, информиращи потребителя какво се случва по време на работа със сайта.
10. Пазете празни пространства
1. Използвайте бутони, обекти, икони вместо подчертан текст, за да посочите връзки. 2. Създайте подложка, която е достатъчно голяма, така че потребителят да може ясно да различи елементите. 3. Увеличаването на височината на реда прави текста по-лесен за четене на мобилен екран.