Привет всем людям сообщества:-) Это мой 5 -й пост, и я благодарен всем, потому что я люблю это сообщество. И особое спасибо всем моим 400 подписчикам. Я постараюсь предоставлять ценные сообщения каждую неделю … ❤ 😃
Я собираюсь поделиться полными взломами, касающимися проектирования 404 страницы, но прежде чем это понять, почему это происходит и с какими последствиями мы должны столкнуться из -за этого. Понимая это как разработчика, мы можем разработать лучшие 404 страниц с лучшим пользовательским опытом.
*Сценарий реального жизни *
Когда вы находитесь в неизвестном месте, и вы заблуждаетесь там, и у вас нет карты. Теперь вы начинаете получать Разочарован Анкет
И в то время, если кто -то поможет вам найти ваш путь. Это чувствует, что это здорово, согласен?
404 Страница ошибки аналогична Реальные проблемы И вам просто нужно иметь это так же, как и другие проблемы.
Вы можете взять 404 страница как возможность Сделать как можно более привлекательное, как можно более привлекательное, чтобы предложить различные решения, чтобы уменьшить разочарование клиентов и позволить им оставаться на сайте/приложении намного дольше.
По умолчанию 404 страница ошибки
Если вы не относитесь к 404 странице всерьез, не придавая такому большому значению, как другую страницу, вам придется столкнуться с последствиями.
Плохие новости
Как было завершено исследование, 74% клиентов Оставьте сайт после того, как они столкнулись с страницей 404-ошибок.
Хорошие новости
Только 23% посетителей Эта встреча на странице 404 предпринимает вторую попытку найти пропущенную страницу.
Понимание ошибки
Чтобы создать лучшую страницу 404, вы должны понять:
-
Типиз 404 ошибки - Кто
Причиныэта ошибка?
Тип 404 ошибки
- Ошибка 404 | Http 404
- 404 файл не найден
- Страница не найдена
- Запрашиваемый URL не найден на этом сервере
- Http 404 Не найдено | 404 Страница не найдена
Кто вызывает эту ошибку?
Либо это пришло от Пользовательская сторона или это из Сторона веб -сайта . Верно?
Если ошибка со стороны пользователя, то они неправильно ввели ссылку. Вы не можете контролировать, какой человек вводит в свою клавиатуру.
Простая категоризация ошибки
Просто мы можем классифицировать 404 ошибки в 3 простых частях:
- Страница удалена
- Неправильный URL -адрес пользователя
- Ссылки сейчас не существует
Схематическое представление: 404 последствия
Но мы должны понимать, что «ошибки – это часть нашей жизни»
Теперь, после понимания того, что такое 404. Начните проектировать его с правильными взломами.
Взлом 1: поддержание последовательности бренда
Всегда поддерживайте согласованность с вашими шрифтами, темами, логотипом, заголовком, нижним колонтитулом, как и другие страницы. Итак, вы найдете эту страницу, похожую на других.
Пример реального веб -сайта:
Хак 2: предоставить навигацию
Предоставьте навигацию на странице 404, чтобы пользователи могли перейти со этой страницы на другую страницу, оставаясь на вашем сайте.
Пример реального веб -сайта:
Хак 3: Предоставьте поле поиска
Предоставляя поле поиска, вы можете легко перейти со страницы 404 на любую другую страницу. Это даст возможность пользователю напечатать.
Пример реального веб -сайта:
Хак 4: показывая эмоции
Вы можете предоставить эмоции своему 404-страничному дизайну, чтобы он выглядел более оригинальным и реалистичным, как «упс», «ох», «awhhk», «хммм». Здесь ваша главная цель – нацелить эмоции людей.
Пример реального веб -сайта:
Хак 5: извиняться
Более важная часть разработки страницы 404 всегда показывает извинения, даже если это ошибка пользователя. Основная цель извинений состоит в том, что вы показываете своему пользователю, что действительно цените его.
Пример реального веб -сайта:
Взлом 6: Сохраняйте сообщение об ошибке простым
Не показывайте страшный текст и изображение здесь. Всегда предоставляйте простому и четкое сообщение своему пользователю. «Минимализм лучше всего подходит для любого дизайна». Простой язык помогает каждому пользователю понять, почему он получает эту страницу ошибки 404.
Пример реального веб -сайта:
Взлом 7: Добавьте полезные ссылки Только
Добавьте популярную страницу вашего сайта или любые другие важные ссылки на вашей странице 404. Не пытайтесь перегружать свою 404 страниц слишком большим количеством ссылок.
Пример реального веб -сайта:
Хак 8: Ссылка на домашнюю страницу [CTA]
Добавление кнопки домашней страницы важно, чтобы добавить на вашу страницу 404, чтобы пользователи возвращались на главную страницу, потому что они потеряны. Итак, вы направляете их и вернули.
Пример реального веб -сайта:
Хак 9: Добавьте немного веселья, добавив изображение | Анимация | Иллюстрация
Вы можете использовать иллюстрацию/изображения/иллюстрацию, изображения, связанные с вашей темой или продуктом, объединив 404.
Пример реального веб -сайта:
Hack 10: Показать популярные посты Добавление популярной страницы на вашей странице 404 предоставляет пользователям разновидности для поддержания их интереса.
Пример реального веб -сайта:
Взлом 11: Использование интерактивности
Предоставление интерактивности, например, добавление игр, викторинов, рисунка и т. Д., Чтобы пользователи могли взаимодействовать с вашей страницей 404 и не чувствовать себя принуждением, видя ее.
Пример реального веб -сайта:
Хак 12: Показать соответствующие результаты
Этот трюк также полезен, как будто ваш пользователь совершил ошибку, набрав ун Затем вы можете показать другие результаты, сопоставляющие термин, который написал пользователь. Это также даст пользователям разновидности для изучения.
Пример реального веб -сайта:
Это не значит включать все эти элементы на одной странице. Дизайнер может принимать базу решений по требованию/приоритету ».
404 Дизайн страницы ошибки: Conts Checklist
1. Не относится к тому же, как и другие страницы веб -сайта. 2. Обвиняет пользователей, что это их ошибка. 3. Не давая достаточного количества информации об ошибке. 4. Не говоря уже о том, как восстановиться после ошибки. 5. Перегрузка страницы со многими ссылками 6 Использование языка сервера для сообщения об ошибках, а не языке пользователя
404 Дизайн страницы ошибок: контрольный список DO
1. Поддержание согласованности бренда 2 Предоставьте навигацию 3 Сохраняйте сообщение об ошибке простым 4 Показать соответствующие результаты 5 Предоставьте поле поиска 6 Дайте ссылку на домашнюю страницу [CTA] 7 Будьте извиняющимися 8 Показать популярные посты 9 Добавьте только полезные ссылки 10 Добавьте немного веселья, добавив изображение | Анимация | Иллюстрация 11 Показывая эмоции 12 Использование интерактивности
Если вы любите этот пост, пожалуйста, дайте возможность повысить мою уверенность, чтобы написать больше сообщений для этого сообщества. Я также делюсь коротким микроблогом на своей странице в Instagram.
Если у вас есть сомнения относительно разработки или дизайна UI/UX. Пожалуйста, не стесняйтесь общаться со мной на: ❤ Instagram Page LinkedIn
С уважением Акаш
Оригинал: “https://dev.to/designerakash/master-designing-404-error-page-12hacks-3fgk”