Използване на картинки и видео
Кога е допустимо добавянето на картинки
- когато имаме поредица от стъпки (повече от 2 обичайно)
- когато имаме няколко подобни елемента в страницата и трябва да се разбере кой конкретно трябва да се използва
- когато трябва да се направят много стъпки, за да се покаже даден резултат (например добавяне на нова банкова сметка)
- ако имаме посочени конкретни интерфейсни елементи, които са описани с няколко думи ("горе в дясно кликате ...")
Къде трябва да са картинките
- може да са между отделните стъпки, когато показват конкретни кликове например
- може да са в края на дадено описание, когато показваме резултата от няколко стъпки
- ако действието е върху част от екрана е по-добре да се покаже частта от екрана, когато не се вижда ясно какво е кликнато
- ако се отваря нещо голямо, то може да се покаже и целия екран
- ако е нужно може да се добави caption на картинката
- количеството картинки не трябва да е прекалено голямо
- (?) (кой е критерия за това че са прекалено много), тук @момчил какво мислиш?
Кога се използват гиф-ове, вместо картинки
- ако действието се изпълнява с няколко клика
- ако имаме сложни форми, в които трябва да са попълнени редица полета (например списък фактури->филтрирай>търси)
- когато има много контекст, в който трябва да се изпълни действието (например в страница за получаване, какво се вижда от GDPR съгласието)
Технически особености
- размерите на картинките трябва да са по широчина не повече от нормалния размер на текста
- резолюцията на картинките да е до 72 пиксела/инч
- броя фреймове в gif-а да не е прекалено голямо, за да не става много голям самия гиф
Данни по картинките
- в картинките и gif-овете не използваме имена и данни на съществуващи фирми (освен на Инвойсинг солюшънс България), реални имейли и т.н.
- ако използваме тестови данни, то те трябва да са смислени и да не съдържат разни глупости
- артикул "Асдфадфаверафад" - не е допустимо
- артикул "Клавиатура Logitech Z93" - е нормално имe
Инструменти за правене на картинки и gif
Инструменти за картинки/скрийншот:
Инструменти за gif: