5 способов улучшить UX с помощью GIF и CSS


Содержание материала:

10 способов оптимизации GIF

Формат GIF предназначен для сжатия изображений с большими областями сплошного цвета и чёткими элементами, вроде рисунков, логотипов или текста. Будучи форматом изображения 8 битовой глубины он давно бы исчез с просторов Интернета после введения форматов JPEG и PNG, GIF, но несмотря на это он по прежнему является излюбленным форматом среди веб-разработчиков благодаря своей функции покадровой анимации.

Кстати, если вам часто приходится работать с анимированными GIF файлами, то возможно вам будет интересно просмотреть автоматизированное решение – Photoshop экшен « Gift Export », доступный на Envato, который берёт несколько изображений, автоматически загружает их в Photoshop и экспортирует в формат GIF.

1. Обрезка анимации

Для начала откройте видео-файл в Photoshop. Большая часть видео для всей последовательности GIF анимации нам не нужна, поэтому можете обрезать её, прибегнув к помощи панели Timeline (Временная шкала). Просмотрите видео и найдите подходящий фрагмент, а остальное удалите.

2. Уменьшение размера изображения

Вы можете уменьшить размер изображения с помощью меню Image (Изображение), либо сделать это чуть позже в диалоговом окне Save for Web (Сохранить для Web). Лично я предпочитаю уменьшать изображение в начале работы в диалоговом окне Image Size (Размер изображение), потому как вы сэкономите время, нежели будете делать это в конце при сохранении. При изменении размера изображения, видео-слой необходимо преобразовать в смарт-объект, но не стоит беспокоиться, это никак не повлияет на рабочий процесс.

3. Save for Web (Сохранить для Web)

Что я люблю в этом процессе, так это то, что вам не нужно делать каких-либо преобразований на панели Timeline (Временная шкала) для сохранения покадровой анимации, так как диалоговое окно Save for Web (Сохранить для Web) сделает всю работу за вас, как только при выходе вы выберите формат GIF. Посмотрите, в правом нижнем углу диалогового окна появились параметры анимации. Если вы захотите уменьшить размер изображения, то сделать это можно в данном окне.

4. Уменьшение количества кадров

При необходимости, вы можете ещё больше уменьшить размер GIF-анимации, для этого понадобится повторно открыть экспортированный GIF файл в Photoshop и удалить каждый второй либо третий кадр во временной шкале. Далее вам необходимо выбрать оставшиеся кадры и увеличить их продолжительность для компенсирования удалённых кадров. Если не проделать эту работу, то анимация будет воспроизводиться быстрее, чем оригинал. После того, как вы закончите, сохраните GIF-анимацию, по размеру она должна быть меньше оригинала.

5. Количество цветов

Наиболее важной опцией для оптимизации размера файла формата GIF является количество цветов, которые используются в таблице цветов. Максимальное их число 256 и ограничены они 8-битной глубиной. Вообще говоря, количество цветов вы можете уменьшить до 64 или менее. Здесь всё зависит от исходного видео, возможно, вам придётся увеличить их количество для получения лучшего результата.

6. Алгоритм сокращения цветов

  • Perceptual (Перцепционный) предназначен для создания пользовательской таблицы цветов, отдавая предпочтение тем тонам, которые чётко распознаёт глаз человека.
  • Selective (Селективный) создаёт таблицу цветов, аналогичную Перцепционной таблице, но созданную на ключевых оттенках изображения. В этом алгоритме предпочтение отдаётся web-цветам. В Photoshop он установлен по умолчанию.
  • Adaptive (Адаптивный) предназначен для создания пользовательской таблицы цветов спектра, преобладающих в изображении. К примеру, для изображения, в котором больше всего преобладает синих и зелёных цветов, будет создана таблица из синих и зелёных оттенков. Большинство оттенков изображения собирается в определённой области спектра.
  • Restrictive (Ограниченный) применяет стандартную палитру, состоящую из 216 безопасных web-цветов. Этот параметр гарантирует, что ни один браузер не применит дизеринг к цветам изображения с 8 битовой глубиной цвета. Если изображение имеет менее чем 216 цветов, то неиспользуемые цвета удалятся из таблицы.
  • Custom (Заказная) палитра цветов выбранных пользователем.

7. Dithering (Дизеринг)

Так как GIF-файлы содержат ограниченное количество цветов, вы можете имитировать недостающие цвета доступными при помощи сглаживания. Для этого в меню Dithering (Дизеринг) необходимо выбрать один из алгоритмов. Метод Diffusion (Случайный) предназначен для регулирования количества смешения. Методы Pattern (Регулярный) и Noise (Шум) не предназначены для этого. Чем больше сглаживание на изображении, тем больше будет размер файла. Смешение добавляет разноцветные пиксели вблизи друг от друга для имитации вторичных цветов или гладких градаций в цвете. Чтобы получился хороший результат, некоторые изображения должны содержать сглаживание. Но если вы хотите сохранить маленький размер файла, то сглаживание нужно использовать как можно меньше.

8. Другие опции

  • Web Snap (Web-оснастка) помогает предотвратить размытие в браузере. Делается это путём привязки некоторых цветов к безопасным web-цветам. Чем больше web-цветов, находящихся в GIF, тем меньше браузером будет использоваться сглаживание. При значении 0% цвета будут не затронуты, а при значении 100% все цвета в изображении изменятся для Web-безопасности.
  • Lossy (Потери) – данная опция контролирует степень потерь визуальной информации, которая способна уменьшать размер файла.
  • Если в изображении содержится прозрачность, то поставьте галочку возле опции Transparency (Непрозрачность) для сохранения прозрачных пикселей. Убрав галочку, тем самым частично или в полной мере прозрачные пиксели заполнятся матовым цветом.
  • При активной опции Interlaced (Чересстрочно) файлы формата GIF в браузере будут загружаться в несколько проходов.

9. Сравнение оригинала и оптимизированных версий

В результате добавления множества пользовательских изменений можно сравнить разницу в качестве и размере файла при помощи режима 2-Up (Два варианта).

10. Просмотр, сохранение настроек и оптимизация размера файла

Если в результате оптимизации GIF файла вы довольны окончательными настройками с возможностью предварительного просмотра в браузере, то не забудьте сохранить их в как пресет. Кроме того, вы можете указать ограничение на размер GIF файла при помощи дополнительной настройки Optimize to File Size (Оптимизация по размеру файла). После того, как вы её примените, программа Photoshop автоматически попытается подогнать размер с наилучшим качеством изображения.

Как создать gif анимацию, имея html/css анимацию?

Есть у меня вот такая анимированная иллюстрация на html/css без использования изображений.
Я сам сижу в хроме и соответственно, когда верстал сверял в хроме. Потом понял, что добавление префиксов для других браузеров не решит проблему кроссбраузерности, так как увидел картинку в firefox.
Для сравнения вот отображение в Chrome и Firefox.

Даже если не брать в расчёт то, что в Firefox одна из важных анимаций на иллюстрации не работает, несколько элементов отображаются совсем некорректно.
Но вопрос состоит не в адаптивной вёрстке. Я понял, что вряд ли осилю сверстать несколько таких анимаций для каждого браузера.

Вопрос:
Мне нужно каким-то образом записать эту анимацию и создать gif картинку с этой анимацией, чтобы она идеально отображалась даже в Firefox.
Подскажите с помощью какого софта можно сделать это, никогда раньше не работал с gif.
Или если у вас есть другие предложения, пишите.

8 хитрых приёмов, реализуемых с помощью одного лишь CSS

CSS может гораздо больше, чем вы от него ожидаете. С каждым годом этот язык становится всё мощнее, получая функционал, который раньше был только у JavaScript. В этой статье мы рассмотрим 8 хитрых трюков с CSS-функциями, для которых не нужен JS.

1. Подсказки (tooltips)

Многие сайты до сих пор используют JavaScript для создания подсказок, но самом деле на CSS их сделать гораздо проще. Самым лёгким решением будет прописать текст подсказки в data-атрибуте HTML-кода, например, data-tooltip=»…» . Теперь можно использовать CSS для отображения текста подсказки в функции attr() :

Всё предельно просто. Конечно, для стилизации нужно больше кода, но, к счастью, для этого есть прекрасная библиотека Hint.css.

2. Использование data-атрибутов и функции attr()

Мы уже использовали attr() для подсказок, но это не единственный способ её применения. В сочетании с data-атрибутами вы можете создать изображение-ярлык с заголовком и описанием, используя лишь одну строку HTML-кода:

Теперь вы можете использовать функцию attr() для отображения заголовка и описания:

Вот рабочий пример с анимацией, срабатывающей при наведении:

3. CSS-счётчики

То, что можно делать с CSS-счётчиками, похоже на магию. Это не самая известная функция языка, и многие считают, что она почти не поддерживается, но это не так:

See Can I Use css-counters? Data on support for the css-counters feature across the major browsers from caniuse.com.

Счётчики не стоит использовать для списков (

    ), но они прекрасно подойдут для пагинации или отображения чисел в галерее. Также можно считать количество выбранных элементов, для чего нужно на удивление мало кода (а JavaScript и вовсе не нужен):

CSS-счётчики также прекрасно подходят для отображения динамически изменяющихся чисел в списках, которые можно пересортировать перетаскиванием:

4. Эффект “замерзшего стекла” при помощи CSS-фильтров

Ещё в iOS 7 Apple добавила эффект “замерзшего стекла” — полупрозрачные, размытые элементы. Этот эффект становится весьма популярным. Реализовать его раньше было не так уж и просто — до того, как появились CSS-фильтры, изображения приходилось искажать. Теперь же всё стало намного легче.

See Can I Use css-filters? Data on support for the css-filters feature across the major browsers from caniuse.com.

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

В будущем будет возможно создавать похожие эффекты при помощи свойства backdrop-filter и функции filter() , которые пока что поддерживаются только Safari.

5. Используем HTML-элементы в качестве фона


Обычно в качестве фона вы используете JPEG- или PNG-файл или градиент. Знали ли вы, что при помощи функции element() вы можете использовать

See Can I Use css-element-function? Data on support for the css-element-function feature across the major browsers from caniuse.com.

Возможности почти безграничны, что демонстрирует пример с MDN.

6. Улучшенная сетка при помощи calc()

Гибкие сетки — это очень полезная штука, но при работе с ними возникают различные проблемы, связанные в основном с разметкой и размерами блоков. Даже flexbox не справится с этой задачей в одиночку. Но функция calc() , которую можно использовать в качестве значения, может принести много пользы. В этом руководстве приведены примеры использования этой функции. Используя препроцессор наподобие Sass и функцию calc() , создать удобную сетку будет совсем несложно. Кроме того, эта функция поддерживается почти всеми браузерами.

Топ-пост этого месяца:  Как создать приложение для блогов с помощью Angular, MongoDB и Node.js настройка компонента

See Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.

7. Выравнивание фиксированных элементов

Функцию calc() также можно использовать для выравнивания элементов с фиксированным положением. Например, если у вас есть обёртка с полями переменного размера слева и справа и вам нужно точно выровнять элемент внутри обёртки, то вам придётся поломать голову, выбирая правильный размер отступа. С calc() вы можете сочетать абсолютные и относительные величины для идеального выравнивания:

8. Анимации при помощи cubic-bezier()

Для того, чтобы сделать пользовательский интерфейс сайта или приложения более привлекательным, вы можете использовать анимации. К сожалению, базовые варианты весьма скудны: например, «linear» или «ease-in-out» . Всякие подвижные анимации вообще не входят в стандартный набор. Но с функцией cubic-bezier() вы можете анимировать элементы именно так, как захотите.

cubic-bezier() можно использовать двумя способами — понять её математическую основу и написать самому или использовать генератор. Думаю, второй вариант предпочтительнее.

Заключение

Используя функции CSS с умом, можно не только решить проблемы с разметкой, но и существенно расширить границы творческих возможностей. Учитывая, что поддержка функций браузерами только улучшается, вам стоит обратить внимание на свой код и улучшить его, используя функции вроде calc() .

Как улучшить UX за счет анимаций

Движение всегда рассказывает какую-то историю. Не длинную, не сложную — простую историю, что-то типа “эй, посмотри сюда” или “ура, операция выполнена успешно”. Цель анимаций — не развлечь пользователя, а объяснить ему, что происходит, и как максимально эффективно пользоваться приложением. Эту идею очень понятно донесли ребята из Zurb:

Мы теперь не просто проектируем статичные экраны. Мы проектируем сам процесс: как пользователь переходит с этих экранов непосредственно к изучению содержимого.

Анимации — это одновременно красиво и функционально. Их можно использовать в разных масштабах и контекстах: чтобы скорректировать поведение пользователя, показать статус, обратить внимание пользователя на результат его действий. Ниже я привожу несколько примеров, как можно улучшить опыт взаимодействия с интерфейсом за счет анимаций:

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Оптимизация анимации файлов GIF

В этом уроке мы внимательно рассмотрим все доступные варианты для преобразования видео в GIF-анимацию, и как оптимизировать размер файла.

Формат GIF (Graphics Interchange Format) — формат сохранения изображений, поддерживающий до 256 цветов и в настоящее время применяется, в основном, для показа изображений на страничках сайтов интернета.

Это довольно-таки старый формат, практически вытесненный более современными, например, PNG, но, тем не менее, он используется до сих пор из-за одной свой особенности — он поддерживает анимацию.

Если линейный размер картинки большой, а кадров в анимации много, то значительно разрастается объём файла (1Мб и выше), что недопустимо для показа на страницах сайтов, т.к. большой объём файла замедляет, а при плохом соединении и делает невозможным, загрузку страницы сайта.

Соответственно, при сохранении GIF-анимации, пользователь Photoshop должен оптимизировать анимацию так, чтобы объём готового файла минимальным при максимальном качестве.

В этом материале я дам несколько советов по уменьшению веса выходного GIF-файла с минимальными потерями качества.

1. Обрезка исходного видеоролика

Если Вы создаёте анимацию из видеоролика, то для начала его необходимо открыть в Photoshop и посмотреть его длину на панели Окно Шкала времени (Window TimeLine). Как правило, большая часть кадров ролика для анимации не нужна, поэтому нужно выбрать необходимый участок, обрезав ролик сначала и с конца:

2. Уменьшение линейного размера изображения

Уменьшение ширины и высоты кадра анимации существенно уменьшает объём выходного файла. Это можно сделать в последнюю очередь, в окне «Сохранить для Web» (Save for Web), но я рекомендую уменьшать размер кадра с помощью команды Изображение Размер изображения (Image Image Size), особенно, если Вы работfте с версией выше CS6, у обновлённого инструмента появилось несколько дополнительных опций, в т.ч. окно предварительного просмотра. Подробнее о новшествах команды «Размер изображения» здесь.

Подробнее о сохранении для Web здесь, подробнее об уменьшении линейного размера изображения для публикации в Web здесь.

3. Уменьшение количества кадров при сохранении продолжительности и скорости воспроизведения

Уменьшить количество кадров можно только на шкале покадровой анимации. Если Вы делаете анимацию из видео, Вы должны сначала сохранить видео как GIF, затем заново открыть его в Photoshop и преобразовать шкалу времени в покадровую анимацию:

Внимание! Перед преобразованием запомните время продолжительности показа!

Затем вручную выделяем и удаляем, к примеру, каждый третий кадр (выделяем с зажатой Ctrl, затем нажимаем Delete).

Затем выделяем все кадры на шкале (клик по первому кадру, зажать Shift, клик по последнему), клик по треугольничку в правом нижнем углу любого кадра, выбираем «Другое», откроется окно, где вводим старую продолжительность клипа делённую на новое количество кадров:

4. Уменьшение количества цветов

Одним из наиболее действенных способов для уменьшения объёма файла анимации, поле уменьшения линейных размеров, является уменьшение количества цветов, используемых во всех кадрах. Максимальное количество цветов в 8-ми битном GIF`е — 256.
Для начала можно уменьшить количество цветов до 64, а затем, в зависимости от результата, добавить цвета, если полученное изображение стало заметно хуже, либо уменьшить ещё, если качество визуально не ухудшилось.
Предлагаемые Photoshop`ом количества цветов — 2, 4, 8, 16, 32, 64, 128, 256. Это не обязательные значения, Вы можете самостоятельно ввести произвольное количество цветов от 2 до 256:

5. Отключение опции «Чересстрочно» (Interlaced)

Включенная опция «Чересстрочно» даёт указание браузеру загружать изображение за несколько проходов. И при этом увеличивает объём файла примерно на 10 процентов!
Что это значит? При медленном соединении и/или большом объёме файла полная загрузка изображения происходит медленно, т.е. пользователь после открытия веб-странички вначале лицезреет пустое место там, где должно быть изображение. Если же изображение загружается за несколько проходов, сначала подгружается «облегчённая» низкокачественная версия картинки, где рисунок состоит из крупных квадратов (низкое разрешение), и по мере подгрузки картинка приобретает свой обычный вид.

Для обычных картинок это неплохо, но для анимации совершенно ни к чему. Поэтому снимаем галку с опции и уменьшаем размер файла на 10 процентов.

Это далеко не все способы уменьшения размера готового анимированного файла, об остальных я расскажу в следующем материале.

Делаем контент ярче с помощью гифок. Полное руководство

Хотите узнать, как самостоятельно создавать гифки? Когда и где делиться ими?

В этой статье собраны инструменты, советы и хитрости для создания и использования гифок. Вы узнаете:

9 простых приложений и инструментов для создания гифки за несколько минут

Как сделать гифку из видео

Если вы ищите что-то, что позволит создать гифку из видео YouTube, поста Instagram или Vine, Gifs.com – ваш идеальный инструмент.

Все, что нужно сделать – вставить URL видео и вырезать гифку, установив время. В приложении есть набор полезных инструментов, среди которых – добавление текста и обрезка изображения.

Giphy – это не только дом для одной из самых больших гиф-коллекций интернета (подробнее об этом ниже), но еще и замечательные инструменты для создания гифок. Один из них – GIF Maker, который позволяет создавать гифки из видеофайлов или ссылок на YouTube.

Нужно загрузить видеофайл или вставить ссылку, создать гифку и отредактировать ее с помощью простого интерфейса. С GIF Maker можно выбрать момент, с которого вы хотите начать, установить продолжительность и добавить текст.

Как только вы кликните на ‘Create GIF’, гифка добавится к библиотеке Giphy и вы сможете ей поделиться.

Как «сшивать» фотки

Slideshow – это еще один инструмент от Giphy, который позволяет комбинировать фотографии и гифки, чтобы создавать анимированные слайдшоу.

Для начала нужно выбрать фотографии или гифки, которые вам нравятся. Затем, когда выбранные файлы уже загружены, вы можете установить очередность, в которой они должны показываться, и продолжительность показа фотографий.

Gifmaker.me – это еще один прекрасный инструмент, который позволяет превращать фотографии в гифки. У Gifmaker есть удобная панель контроля (‘ControlPanel’), с помощью которой можно отредактировать гифки, изменяя длину канвы, скорость смены фотографий и количество повторов гифки.

Imgflip похож на Gifmaker.me. Но с его помощью можно создавать как гифки из картинок, так и из видео. Imgflip позволяет редактировать гифки, добавляя текст, устанавливая продолжительность показов и меняя размеры изображений. Правда, чтобы использовать гифку без водяного знака, вам нужен аккаунт ImgflipPro ($9.95/месяц).

Как редактировать гифку

GIF Editor – еще один инструмент от Giphy, который предназначен для редактирования и улучшения готовых гифок. Он позволяет добавлять к гифкам анимированные стикеры, забавные фильтры и, конечно, текст.


Чтобы начать редактирование нужно выбрать гифку, добавив ее URL, ссылку или загрузив файл с компьютера. Закончив редактирование можно добавить анимации и фильтры из библиотеки и текст.

Как делать скринкаст-гифки

Иногда возникает необходимость сделать гифку с изображением экрана компьютера. Они полезны для руководства по использованию какого-либо продукта и создания клиентского сервиса.

CloudApp – простой и удобный инструмент. Установив его, вы получаете возможность делать запись экрана, подписывать картинки, снимать видео с помощью веб-камеры и многое другое. Вы также сможете скачивать эти записи и делиться ими с помощью специально сгенерированного URl.

Похожий на CloudApp инструмент Recordit позволяет выбрать область экрана и создать гифку за секунды. Это небольшое программное обеспечение, которое нужно установить на компьютер (есть версии для Windows and Mac).

Это приложение на базе мессенджера Slack, которое позволяет создавать гифки с использованием веб-камеры и немного повеселиться. Для этого всего лишь нужно соединить приложение с мессенджером.

Как делать гифки в Photoshop

С фотошопом все немного сложнее, но эта программа также дает возможность создавать именно то, что вы хотите.

Эта гифка создана с помощью Photoshop. Техника ее создания описана ниже.

Шаг 1: Загрузите изображения в Photoshop

  • Если у вас есть готовая последовательность изображений:

Если вы уже отобрали изображения, из которых хотите сделать гифку, откройте Photoshop, выберите File > Scripts > Load Files Into Stack. Затем нажмите ‘Browse’ и выберите файлы, которые хотите использовать.

  • Если у вас нет готовой последовательности изображений:

Если у вас нет готовой последовательности, можно создать слои в Photoshop. Они будут выступать в качестве кадров анимации. Чтобы добавить новый слой к фотографии, нажмите Layer > New > Layer.

Итак, когда слои готовы, можно перейти к следующему шагу.

Шаг 2: Создайте анимацию

Для создания гифки вам нужна временная шкала, которая поможет превратить организовать изображения в последовательную анимацию. Для того, чтобы открыть временную шкалу выберите Window > Timeline.

Шкала появится в нижней части экрана.

Затем нужно кликнуть на ‘Create Frame Animation’ и в меню справа выбрать ‘Make Frames From Layers’.

Когда все кадры встанут на свои места, можно проиграть анимацию, нажав ‘Play’. Если какие-нибудь кадры окажутся не на своих местах, их можно передвинуть.

Шаг 3: Экспортируйте гифку

Итак, когда вы довольны результатом, нужно экспортировать получившуюся гифку. Для этого нажмите на File > Export > Save for Web (Legacy).

Откроется окно ‘Save for Web’, кликнув на ‘Presets’, вы можете выбрать тип гифки (GIF 32, GIF 64 и GIF 128) и добавить эффект сглаживания или нет (Dithered или No Dither).

Как сделать гифку из видео с помощью Photoshop

Чтобы превратить видео в гифку с помощью Photoshop, нужно кликнуть на File > Import > Video Frames to Layers. Затем вы сможете выбрать, какую часть видео импортировать, и все ли кадры хотите задействовать.

Затем можно добавить текст и экспортировать гифку, как в предыдущем примере.

Топ-пост этого месяца:  Колл-трекинг — как за один-два месяца в разы увеличить конверсию на вашем сайте и снизить стоимость

Что такое UX и UI, и почему UX-дизайнеров не бывает

Время чтения: 11 минут Нет времени читать? Нет времени?

Выражение «UX/UI-дизайнер» – абсурд. Пользовательский опыт (или UX) имеет такое же отношение к дизайну, как маркетинг к контекстной рекламе. То есть контекстная реклама – один из многих инструментов маркетинга. А дизайн, в том числе UI-дизайн – один из многих факторов, формирующих пользовательский опыт или UX.

  • В чем разница между UX и UI?
  • Кто такой UX-дизайнер на самом деле и почему ему не нужна Figma и Photoshop?
  • Какую роль в формировании пользовательского опыта играет маркетолог, руководитель и собственник предприятия?

Почему UX/UI дизайнеров не бывает

Чтобы ответить на этот вопрос, разберем понятия.

Что такое UI или интерфейс пользователя

UI или пользовательский интерфейс сайта (англ. user interface) – совокупность элементов, с помощью которых посетитель пользуется веб-страницей. К ним относятся:

Например, чтобы пользователь мог добавить товар в корзину, в интерфейсе интернет-магазина есть кнопка «Купить». Чтобы посетитель мог посмотреть дополнительные материалы по теме, в интерфейсе нашего блога есть врезки «Читайте также» (см. ниже).

Что такое UX или пользовательский опыт

UX или пользовательский опыт – пользовательское восприятие и реакции на взаимодействие с сервисом, услугой или продуктом. UX включает эмоции, ожидания, предпочтения, личное восприятие, физические, психические и поведенческие реакции, которые возникают перед, во время и после взаимодействия.

Теперь простыми словами. Пользовательский опыт формируют не только элементы сайта. На UX клиента интернет-магазина влияют:

  • Ассортимент товаров.
  • Цены.
  • Наличие удобных способов оплаты.
  • Наличие удобных способов доставки.
  • Стоимость доставки.
  • Качество товара.
  • Качество упаковки при пересылке.
  • Возможность вернуть или обменять товар.
  • Тембр голоса оператора колл-центра.

Список далеко не полный. Последний пункт подчеркивает, что на UX влияют не только объективные факторы. Пользовательское восприятие, эмоции, ожидания, предпочтения, физические и психические реакции, – вот некоторые субъективные факторы, которые формируют пользовательский опыт.

Простой пример на иллюстрации показывает отдаленное отношение UX к дизайну.

На сайте интернет-магазина товар стоит 900 рублей, к тому же его нет в наличии. В группе частного продавца в сети «ВКонтакте» этот же товар стоит 600 рублей. Внимание, вопрос: при чем здесь дизайнер?

Кого можно назвать проектировщиком UX на самом деле

Дизайнер в привычном смысле этого слова полностью не контролирует UX. Комплементарные цвета бесполезны, если вы продаете некачественный продукт. С помощью «Фотошопа» не нарисуешь прямые руки сотрудникам службы доставки, которые плохо пакуют бьющиеся товары. Дизайнер, даже если ему на бейдже добавили приставку UX-, не может полностью формировать пользовательский опыт.

Руководитель отдела дизайна Lloyds Banking Group Дэн Макоски говорит, что UX-дизайна не существует. Опыт – субъективные переживания, которые не может контролировать дизайнер. Специалист может только повлиять на пользовательский опыт.

Тем не менее дизайнер через интерфейс и визуальное оформление сайта влияет на пользовательский опыт. Другие специалисты тоже влияют на пользовательский опыт:

  • Автор и редактор помогают посетителю найти на сайте нужную информацию.
  • Веб-разработчик превращает макеты дизайнера в живые веб-страницы.
  • Рабочий на заводе делает качественный продукт, за которым пользователь приходит на сайт.
  • Менеджер по продажам помогает клиенту понять, какой именно продукт ему нужен.

Можете самостоятельно продолжить этот список с поправкой на сферу деятельности компании и особенности веб-проекта.

Кого же можно назвать дизайнером или проектировщиком пользовательского опыта? Кто планирует, реализует и контролирует взаимодействие клиента с бизнесом? Кто может выпрямить кривые руки упаковщиков, намекнуть снабженцам на скудный ассортимент, научить хорошим манерам грубиянов из колл-центра?

В зависимости от масштабов предприятия, это топ-менеджеры и собственники.

За пользовательский опыт или опыт взаимодействия потребителя с бизнесом отвечает топ-менеджер или владелец предприятия. Его первый помощник – маркетолог или руководитель отдела маркетинга. Вот настоящие проектировщики или дизайнеры UX.

Как UI-дизайн улучшает пользовательский опыт

Выше сказано, что прямые руки упаковщиков, доброе сердце операторов колл-центра и наметанный глаз редактора влияют на UX. UI-дизайн тоже влияет на пользовательский опыт. Примеры ниже это подтверждают. Но сначала нужно разорвать еще один шаблон.


Дело в том, что нет общепринятого определения термина и сферы ответственности веб-дизайнера в целом и UI-дизайнера в частности. У нас веб-дизайнером называют проектировщиков веб-страниц. Эти специалисты проектируют интерфейс, делают прототип и отдают макет веб-разработчику. А веб-разработчик реализует дизайн средствами HTML, CSS, JavaScript и других инструментов.

В буржунете веб-дизайнер – специалист, который проектирует и реализует веб-страницы. Посмотрите на программу курса Responsive Web Design на freeCodeCamp. Это основы HTML и CSS. Такого же подхода придерживается образовательный ресурс «Хекслет». В первом уроке курса по HTML и CSS преподаватели объясняют, почему лучше называть веб-дизайнерами тех, кого в рунете принято называть верстальщиками.

Второй подход логичнее, так как на UX влияет не только проект веб-страницы в целом и веб-интерфейса в частности, но и корректность реализации этого проекта. Примеры ниже это подтверждают.

Атрибут alt критически важен для UX людей с нарушением зрения

Это самый банальный пример влияния пользовательского интерфейса на пользовательский опыт. Когда на лендинг приземляется обычный человек, он видит красивые фотографии товара. Когда на лендинг приземляется человек с нарушением зрения, картинку он не видит.

Проблему решает атрибут alt тега img. Если вы не напихали в него ключевых слов, а описали изображение, незрячий человек понимает содержание фотографии с помощью скринридера.

Проверка корректности заполнения полей формы улучшает UX

Наверняка вы сталкивались с неприятной ситуацией: заполняете длинную форму, пытаетесь отправить данные и получаете сообщение об ошибке. Реализация UI с учетом стандартов HTML5 защищает от этой проблемы и улучшает UX.

Попробуйте ввести цифры или текст в поле Email address ниже. Если вы вводите некорректное значение, форма моментально показывает это. Для этого веб-дизайнер указал тип данных для поля формы (input type=»email»).

Автофокус экономит время посетителя

Обратите внимание на иллюстрацию. После перехода на страницу авторизации пользователь может сразу вводить номер телефона. Ему не надо устанавливать курсор в поле формы.

Веб-дизайнеры улучшили пользовательский опыт с помощью атрибута autofocus.

Авторы могут улучшить UX с помощью информативных анкоров

Анкоры типа «здесь», «читайте еще» или «тыц» снижают удобство UI и ухудшают пользовательский опыт. Большинство пользователей переживет это, так как может прочитать окружающий текст и по контексту понять, куда ведет ссылка.

Людям с нарушениями зрения сложнее. В скринридерах есть навигация по ссылкам на странице. Слепые люди слышат анкоры, но не видят окружающий текст. Поэтому важно использовать информативные анкоры. Например, вот ссылка на пошаговое руководство по «Яндекс.Директ».

Асинхронная загрузка скриптов улучшает UX

Внешний код может блокировать загрузку страницы. Внимание на иллюстрацию.

Чтобы избежать проблем с UX, веб-дизайнер настроил асинхронную загрузку скриптов. В этом случае контент страницы загружается, даже если внешний скрипт временно или постоянно недоступен.

Большинство сервисов, включая Google AdSense, РСЯ и другие, предлагают пользователям код с асинхронной загрузкой по умолчанию. Иногда владельцы сайтов отказываются от этой опции из-за неопытности. Это может крайне негативно влиять на пользовательский опыт.

Блоки рекомендаций улучшают UX и повышают эффективность сайтов

Добавление блока рекомендаций в интерфейс сайта – простой и эффективный способ улучшить пользовательский опыт. Это актуально как для контент-проектов, так и для ecommerce-сайтов. Интернет-магазины с помощью рекомендательных блоков типа «Смотрите также» или «С этим товаром покупают» увеличивают конверсию и повышают средний чек.

Добавить блок рекомендаций в интерфейс сайта можно с помощью сервисов типа Relap или myWidget, а также средствами выбранной CMS.

Чтобы улучшить пользовательский опыт, удалите сайдбар

Директор по дизайну компании Apple Джонатан Айв утверждает, что в хорошем пользовательском интерфейсе не должно быть лишних элементов. Отказ от сайдбара – простой и эффективный способ убрать из интерфейса сайта лишний элемент и улучшить UX. В данном случае улучшение пользовательского опыта трансформируется в рост эффективности сайта. Это подтверждают исследования, о которых мы писали в статье о юзабилити сайдбара.

Визуальный отклик оживляет интерфейс и делает пользователя счастливым

Элементы интерфейса с визуальным откликом помогают посетителю пользоваться страницей и улучшает UX. Примеры:

  • Изменение кнопки при наведении курсора.
  • Изменение цвета поля или другое визуальное подтверждение корректного заполнения формы.
  • Прогресс-бар, который меняется по мере прокрутки страницы.

«Воздух» на странице делает интерфейс удобнее

Свободное пространство подчеркивает элементы интерфейса, помогает пользователям искать нужный контент или функциональность. Чтобы улучшить UI и UX, добавьте на страницу «воздух».

Примеров выше достаточно, чтобы показать влияние пользовательского интерфейса на пользовательский опыт.

Должен заметить, что Дмитрий рассматривает работу с пользовательским опытом в широком смысле, с точки зрения бизнес-процессов от и до. Этот подход актуален в случае, если у компании в штате есть свои специалисты, которые занимаются данными вопросами. Наше агентство также занимается работой с пользовательским опытом, однако мы это делаем в рамках работ по продвижению, т. е. тех процессов, на которые мы как подрядчик можем повлиять: анализ ЦА, анализ поведения с помощью систем статистики, опрос фокус-групп и т. д. Но и в рамках выполняемых нами работ UX-проектирование дает свои плоды и является важным фактором качественной поисковой оптимизации.

UI – часть, UX – целое

Пользовательский опыт выходит далеко за пределы компетенции веб-дизайнера. Дизайнер может влиять на UX с помощью UI. Но называть специалиста по созданию веб-страниц проектировщиком пользовательского опыта нельзя. Это все равно, что назначить кассира в магазине у дома ответственным за финансовый результат и требовать от него таких же объемов продаж, как в гипермаркете.

UX не ограничивается сайтом. На пользовательский опыт влияет рабочий у станка, грузчик, снабженец, продавец, дизайнер и разработчик сайта, автор и редактор, аккаунт-менеджер и так далее. А дирижирует этим оркестром руководитель предприятия и его правая рука – маркетолог.

В завершении уместно процитировать Стива Джобса, который был реальным UX-дизайнером или проектировщиком пользовательского опыта.

Дизайн – не то, как выглядит вещь. Дизайн – то, как она работает.

Как повысить производительность сайта при использовании GIF

В статье даны советы по оптимизации GIF-изображений.

Автор: Чапман Ливер (Chapman Lever), директор по маркетингу в Rigor, США. Отвечает за продвижение идеи важности веб-производительности. Юзабилити-евангелист. Работает с интернет-организациями по всему миру.

Формат GIF (англ. Graphics Interchange Format) был разработан в 1987 году. За 30 лет он практически не изменился. Благодаря своей простоте, а также поддержке во многих сервисах, он по-прежнему широко используется – несмотря на рост JPEG и PNG.

Однако это не самый продуктивный формат изображений. При использовании гифок на сайте их нужно оптимизировать, чтобы они не ухудшали производительность ресурса.

В данной статье мы коснёмся основных способов оптимизации GIF-изображений – как статических, так и анимированных. Мы также рассмотрим отличную альтернативу этому формату, которая позволяет избежать раздувания размера страницы.

Зачем нужно оптимизировать GIF

Когда речь заходит о дизайне веб-страниц, важная роль отводится их производительности. Хотя GIF отлично справляются с привлечением внимания пользователей, они не предназначены для анимации (несмотря на их широкое использование в этом формате). Анимированные GIF увеличивают размер страницы и скорость её загрузки, что приводит к ухудшению UX.

Как улучшить производительность сайта при использовании GIF

В этом разделе мы рассмотрим несколько способов, которые позволяют повысить производительность сайта с GIF-изображениями.

Два метода сжатия изображений

Одним из основных методов оптимизации GIF-изображений является их сжатие. Чаще всего для выполнения этой задачи используется два способа:

  • Сжатие с потерей качества. При использовании этого метода из файла удаляется часть данных, что приводит к уменьшению его размера. При этом качество графики со временем ухудшается.
  • Сжатие без потери качества. Этот метод сжатия изображений позволяет сохранить все данные исходного файла. Это означает, что данные можно будет полностью восстановить из сжатого состояния. Хотя размер полученного файла в данном случае будет больше, чем при сжатии с потерей качества, качество изображения со временем не ухудшится.

Оптимизация статичных GIF путём конвертации в PNG

Самый простой способ улучшить производительность сайта – это использовать PNG вместо GIF. Хотя эти форматы очень похожи, размер PNG-файла после сжатия будет на 5-25% меньше, чем у аналогичного GIF-файла.

Топ-пост этого месяца:  CSS от А до Я создаем адаптивный дизайн с помощью медиа запросов

Для сжатия GIF без потери качества используется алгоритм LZW, созданный в 70-х годах прошлого века. Современные технологии сжатия являются более производительными, чем LZW. При оптимизации PNG как раз используются новые алгоритмы.

Для преобразования GIF в PNG можно использовать любой онлайн-конвертер с поддержкой этой функции.

Оптимизация анимированных GIF

Анимированные GIF могут представлять собой огромные файлы, требующие длительной загрузки. К примеру, анимация, которая длится лишь несколько секунд, может весить несколько мегабайт. Чтобы улучшить производительность сайта, используйте следующие техники:

  • Оптимизация с потерей качества
  • Конвертация анимированных GIF в HTML5-видео


Оптимизация с потерей качества

Поскольку GIF-анимация по большей части состоит из графических данных, а сжатие без потери качества их не изменяет, есть только один вариант максимально уменьшить размер файла – использовать техники сжатия с потерей качества.

Этот тип оптимизации работает за счёт того, что человеческий глаз не способен хорошо различать едва заметные изменения в цвете. К примеру, изображение может содержать тысячи оттенков одного цвета, при этом некоторые пиксели немного отличаются от других. Поскольку глаз не способен различить эти оттенки, при оптимизации изображения один цвет заменяется на другой, что приводит к уменьшению размера файла.

Так как анимированные GIF представляют собой серию отдельных GIF, техники сжатия с потерей качества можно использовать, чтобы сократить размер общего файла за счёт уменьшения каждого из входящих в него файлов. Справиться с этой задачей поможет сервис Gifsicle.

Конвертация анимированных GIF в HTML5-видео

Хотя размер GIF можно уменьшить с помощью сжатия, полученный файл может быть по-прежнему слишком большим. Формат GIF никогда не предназначался для хранения видео. То, что мы сейчас рассматриваем как анимацию, это результат попытки уменьшить издержки на хранение и передачу нескольких изображений с одними и теми же метаданными. На сегодняшний день есть ещё один вариант, который позволяет значительно уменьшить размер GIF-файла (до 95%) – конвертация его в HTML5.

HTML5-видео – это термин, которым обозначается способность браузера проигрывать видеоконтент, используя тег . При этом отпадает необходимость в использовании внешних плагинов.

После появления HTML5 в 2009 году в отрасли велись активные дебаты по поводу того, как такие видео будут храниться и кодироваться. Сегодня же общепринятым стандартом является H.264-кодированное видео, которое хранится в MP4-контейнере. В свою очередь MP4-файлы имеют значительно меньший размер:

Есть множество способов конвертировать анимированные GIF в MP4. В их числе – инструменты ffmpeg и Cloud Convert. Используя последний, вы сможете видеть, насколько уменьшится размер файла после конвертации.

Рассмотрим конвертацию на примере. Ниже показано исходное анимированное GIF-изображение:

MP4-видео, созданное из GIF:

Размер оригинала составлял 100 KB. В результате конвертации был получен файл, размером 23 KB (на 75% меньше исходного):

Заключение

GIF – старейший формат изображений, который по-прежнему популярен, благодаря его простоте, широкой поддержке и возможности использования в качестве анимации. Несмотря на положительные стороны, гифки обычно представляют собой файлы большого размера. Их использование приводит к увеличению размера веб-страницы и замедлению скорости её загрузки. В итоге ухудшается опыт взаимодействия пользователей с сайтом. Чтобы улучшить производительность ресурса, статические GIF нужно оптимизировать, а вместо анимированных – использовать более современные форматы, такие как HTML5/MP4-видео.

Html css Gif Анимация

У меня есть .gif, играющий анимацию один раз. Это не цикл, и я не хочу, чтобы он зацикливался.

У меня есть 2 изображения ( «1 png» и «1 gif animated» )

Я хочу, чтобы каждый раз, когда мышь над png-изображением, gif играет.

Моя проблема в том, что, когда я устанавливаю мой позитив мыши над изображением png, gif играет один раз и останавливается. Когда я перемещаю мышь, а затем перемещаю ее по изображению, он больше не воспроизводится.

#icon является DIV

По умолчанию вы не можете управлять циклом GIF или анимацией. Браузер будет просто воспроизводить GIF, как есть.

Таким образом, по умолчанию невозможно сказать, сколько времени должен играть GIF.

Существует три решения:
1. Вы замените src img на data:image , чтобы вы ввели GIF. Всякий раз, когда изменяется src, GIF будет воспроизводиться снова. Используя встроенный GIF вместо реального URL-адреса, нет повторной загрузки GIF, так что это экономит время. См. http://www.websiteoptimization.com/speed/tweak/inline-images/ для примера
2. Как сказано в комментариях и других ответах, вы можете заменить src тега img на тот же GIF, но с добавлением к URL-адресу (например, someRandomNumber = 1345), чтобы он снова загрузил GIF и снова воспроизвел его, Недостатком является то, что GIF будет перезагружен.
3. Вы используете что-то вроде http://slbkbs.org/jsgif/, чтобы загрузить GIF через AJAX, затем нарисуйте его с помощью элемента canvas и получите полный контроль над ним.

Вам нужно будет извлечь изображение из CSS, чтобы это работало, и используйте img src=

Но вы можете изменить это:

Что это значит, это

  • показывает все изображения на странице
  • проверяет, изменит ли он .gif
  • чтобы добавить случайное число в en.

Вы можете превратить это в функцию и вычистить биты вам не нужны, так что каждый раз, когда вы наведите курсор мыши на PNG — это будет просить .gif изображение снова, потому что он будет иметь различное число добавляется к его конец.

6 лучших анимационных «фишек» CSS3

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

Добавить комментарий