[번역] '404 에러페이지' 24가지 분석 - 2
이 글은 13~24번을 포함한 2편입니다.
1편을 먼저 보시려면 아래 링크를 확인해주세요.
1편 : [번역] '404 에러페이지' 24가지 분석 - 1
13. Interaction Design Foundation
https://www.interaction-design.org/error
IDF의 에러페이지는 사이트의 다른 페이지와 똑같은 템플릿을 사용합니다. 그래서 이게 에러페이지구나라고 한번에 알아보기가 조금 어렵습니다.
이 페이지의 타이틀은 '에러'와 아무 관련이 없습니다. 404라는 작은 아이콘이 있지만 UI에서 크게 눈에 띄지는 않습니다.
그리고 문제해결을 위해 사용자가 직접 에러메세지를 작성할 수 있는 옵션이 마련되어 있습니다. 또 404 에러페이지와 관련된 해당 사이트의 아티클로 이동할 수 있는 링크도 제공됩니다.
다른 페이지들과 마찬가지로 홈이나 일반 페이지로 이동할 수 있는 링크가 있고, 로그인 옵션도 있습니다.
14. Instagram
https://www.instagram.com/error404/
인스타그램의 에러페이지는 단 한 줄의 문장만 보여집니다.
이 에러메세지 문구는 에러의 이유와 설명을 잘 보여주는 아주 평범한 폼입니다.
로그인 옵션과 홈이나 일반페이지로 이동할 수 있는 링크도 제공됩니다.
15. Justinmind
https://www.justinmind.com/error
Justinmind의 에러페이지는 처음보자마자 에러라는 느낌을 받을 수 있는 멋진 테마를 사용하고 있습니다.
이 페이지는 중앙에 큰 폰트로 된 에러메세지를 보여주고 있습니다. 메세지는 단순한 언어로 설명되어 있지만, 이 에러가 왜 발생했는지는 알려주지 않습니다.
상단바에는 일반적인 링크들이 있고, 에러 메세지는 다른 페이지로 이동할 수 있는 3가지 옵션으로 마무리 됩니다.
에러메세지와 함께 큰 시각 이미지도 보여주고 있으며, 전반적인 페이지 테마와 레이아웃은 유저에게 매력적으로 다가옵니다.
16. Lego
Lego의 에러페이지는 유저에게 멋진 인상을 남깁니다.
레고맨이 두개의 전선을 연결하려고 시도하는 이미지 형태로 메세지를 전달합니다. 에러에 대한 설명이 UI의 많은 부분을 차지하지 않습니다.
그리고 홈이나 다른 일반 페이지로 이동하는 링크도 제공됩니다.
17. Linkedin
https://www.linkedin.com/error
Linkedin의 에러페이지는 에러메세지를 전달하기 위해 쾌적한 템플릿을 사용합니다.
에러메세지 타이틀과 설명은 페이지의 중앙에 위치합니다. 그리고 도움말 센터로 넘어가 질문의 답을 얻을 수 있는 옵션도 제공하고 있습니다.
피드와 홈으로 이동하는 링크도 다른 페이지로 이동하는 링크와 함께 제공됩니다. 더불어 사이트의 언어를 바꿀 수 있는 옵션도 있습니다.
18. MailChimp
MailChimp의 에러페이지는 멋진 디자인 템플릿을 사용합니다.
이 페이지는 땅 속 깊이 무언가를 찾고있는 동물 이미지와 함께 메세지를 전달합니다. 에러의 설명은 이 에러가 왜 발생되었는지 알려주지 않습니다.
홈페이지와 일반 페이지로 이동하는 링크도 제공되며 로그인 옵션과 검색옵션도 볼 수 있습니다.
19. Medium
Medium은 간단하면서도 유용한 에러페이지를 제공합니다.
404 타이틀의 에러메세지를 보여주고 있지만, 이 에러의 원인은 찾아볼 수 없습니다.
홈으로 가는 링크와 아티클이나 작가를 찾을 수 있는 검색 옵션을 제공합니다.
20. Mockplus
https://www.mockplus.com/error/
Mockplus의 에러페이지는 간단하고 유용합니다.
404를 잘 보여주는 큰 시각이미지가 두드러져 유저는 페이지의 텍스트를 읽지 않아도 이 페이지가 오류 페이지라는 것을 즉각 알 수 있습니다.
에러가 발생한 이유는 아주 간단한 방법으로 설명하고 있습니다.
그리고 마찬가지로 일반 페이지로 이동하는 링크도 볼 수 있습니다.
21. Qatar Airways
https://www.qatarairways.com/en/404.html
Qatar Airways의 에러페이지는 다른 페이지들과 비슷해 보입니다.
에어 호스티스의 큰 이미지는 에러 페이지와 상관 없어 보이지만, 타이틀은 '페이지를 찾을 수 없습니다.'입니다.
그 아래 설명은 '다른 페이지를 선택해주세요.’입니다. 그럼에도 동일한 위치에 다른 페이지로 갈 수 있는 어떤 리스트도 제공하지 않습니다. 더 아래에는 오류의 원인에 대해 자세히 설명하고 있지만 화면에서 그다지 두드러지지 않습니다.
그리고 마찬가지로 다른 일반적인 링크, 홈으로 가는 링크, 검색 옵션도 확인할 수 있습니다.
22. Sitesee
Sitesee의 에러페이지는 약간 다른 내용이며 매우 심플합니다.
일반적인 오류 메세지를 표시하고 있고 볼거리는 없습니다. 그들은 유저에게 문제 해결을 위해 트윗을 보내달라고 요청하고 있습니다. 사이트의 트위터 페이지로 유저를 이동시킵니다.
홈으로 가는 링크도 제공되고 있습니다.
23. UI Movement
UI Movement의 에러페이지는 이 사이트의 다른 페이지들과 마찬가지로 단순한 디자인을 사용하고 있습니다.
페이지를 찾을 수 없다는 짧은 설명과 함께 에러 메세지를 전달합니다. 홈으로 가는 링크도 함께 제공됩니다.
UI Movement는 이 에러페이지의 장점을 활용하여 유저에게 구독 옵션을 제공하고 있습니다. 이 옵션은 유저가 사이트를 구독하고 좋은 아티클이나 블로그를 이메일로 받아볼 수 있게 합니다.
UI의 다른 옵션들은 사이트의 다른 페이지에 표시되는 옵션들과 동일합니다.
24. YouTube
https://www.youtube.com/error?src=404
YouTube의 에러페이지는 흥미롭고 심플한 디자인입니다.
원숭이가 무언가 찾으려고 시도하는 재미있는 이미지는 유저에게 웹사이트가 찾을 수 없는 무언가를 찾고 있다는 의미를 전달합니다.
심플한 에러 메세지는 이미지와 함께 전달됩니다. 이 메세지는 에러의 어떤 이유도 설명하지는 않습니다.
그러나 사이트에서 다른 것을 찾을 수 있는 검색 옵션을 제공하고 있습니다.
결론
사용자 친화적인 오류페이지는 아래 내용을 포함합니다.
오류와 관련된 이미지
화면에서 시선을 잡는 오류 타이틀
오류, 이유, 해결책을 포함하는 가급적 심플한 설명
오류 페이지의 템플릿은 사이트의 다른 페이지들과 전체적인 테마는 같을 수 있지만, 마주했을 때 사용자의 주의를 끌 수 있도록 다른 페이지들과 달라야 합니다.
