brunch

You can make anything
by writing

C.S.Lewis

by 헤이민 HEYMIN Feb 01. 2019

[번역] '404 에러페이지' 24가지 분석 - 1

UX/UI 디자인에서 중요한 것 중 하나는 사용자가 바른 길로 가지 않았을 때 그 길을 바로잡아주는 일입니다. 서비스는 항상 100프로 완벽하게 작동할 수 없고, 기술적인 오류나 사용자 실수에 의해 오류를 마주할 여지가 있습니다. 그 오류에 대응하는 404 페이지는 '부정적인 결과'지만 꼭 '부정적'으로 보여줄 필요는 없습니다. 다음 사례들을 통해 각 서비스가 그들의 개성을 보여주면서 어떻게 오류메세지를 전달하는지 확인해보세요. 링크를 통해 직접 하나씩 살펴볼 것은 권합니다.

[원문] An Analysis of 24 Creative 404 Error Pages

출처 : dufrenesguideservice

'404' 또는 '페이지를 찾을 수 없습니다.'는 여러분이 인터넷을 하면서 마주하는 매우 일반적인 에러입니다. 이건 당신이 존재하지 않는 웹주소에 들어갔을 때 발생합니다.

이 메세지는 사용자에게 부정적인 영향을 주지 않는 방향으로 디자인되어야 합니다. 이러한 에러의 이유를 전달하면서, 사용자가 이 사이트에 존재하는 페이지로 재접근할 수 있도록 해주어야합니다.

인터넷을 하는 동안 '페이지를 찾을 수 없습니다.'라는 에러를 보면 큰 좌절감을 느끼게 됩니다.

많이 알려진 웹사이트들은 에러임에도 불구하고 사용자에게 기분좋은 사용자 경험을 제공하도록 디자인되어 있습니다. 유머스러운 방법으로 에러를 설명하고 올바른 경로로 돌아갈 수 있도록 가이드를 제공합니다.

이것은 당신이 웹사이트를 디자인할 때, 당신의 사용자를 위해 중요한 일로서 이 페이지를 부정적으로 만들면 안되고 적절함을 찾기 위해 많은 시간을 들여야한다는 것을 의미합니다.

이제 사용자 친화적인 에러페이지를 어떻게 만드는 것인지 이해할 수 있는 24가지의 404 에러페이지 사례를 보여드릴까 합니다.

1. Adobe

https://www.adobe.com/error

어도비의 에러페이지는 오른쪽에 큰 시각이미지를 두고 가운데에 짧은 메세지를 전하여 기분 좋아지는 룩을 제공합니다.

에러페이지의 타이틀 '404 에러페이지'는 상단바 아래에 표시되어 있습니다. 이 타이틀은 UI에서 두드러지지 않으며, 사용자는 처음에 텍스트 문구와 시각이미지를 먼저 봅니다.

에러에 대한 설명은 사용자를 어필하는 관용구를 활용하고 있습니다. 모든 사용자가 이 관용구를 이해할 필요는 없습니다. 그러나 상세 메세지는 '죄송합니다. 이 페이지는 찾을 수 없습니다.' 와 같이 단순한 언어와 표현을 사용해야 합니다. 왜 이런 에러가 발생했는지 이유가 드러나 있지는 않습니다.

사용자는 이 에러를 제거하는 2가지 옵션을 갖게 됩니다. 하나는, 어도비 홈페이지로 이동하는 것이고 다른 하나는 검색페이지로 이동시켜 사이트에서 원하는 것을 찾도록 검색옵션을 제공하는 것입니다.

관용구와 관련된 시각이미지는 오류메세지보다 먼저 눈에 띠는데, 이는 매력적으로 느껴집니다.

다른 사이트들과 마찬가지로, 로그인 옵션과 일반페이지로 이동하는 링크도 에러페이지의 일부분입니다.

2. Amazon

https://www.amazon.com/error

아마존은 단순하고 매력적인 에러페이지를 제공합니다.

'죄송합니다'라는 큰 폰트를 보여주고 무언가 잘못되었다는 걸 전달합니다. 에러 설명은 '우리는 이 페이지를 찾을 수 없습니다'라고 말합니다. 이 에러의 이유는 언급되어 있지 않습니다.

사용자에게는 이 에러를 없앨 수 있는 2가지 옵션이 제공됩니다. 홈페이지로 이동하거나 아니면 사이트 전체에서 검색을 시도해볼 수 있습니다.

강아지 이미지는 사용자에게 밝은 인상을 줍니다. 아마존 블로그로 가는 링크와 흥미로운 태그라인은 사용자에게 재미있는 경험을 제공합니다. 사용자는 블로그 링크를 따라 아마존의 블로그 페이지로 이동할 수도 있습니다.

3. Awwwards

https://www.awwwards.com/error1/

Awwwards의 에러페이지는 설명한 것들보다 훨씬 심플합니다.

에러가 발생했음을 보여주는 404 이미지를 크게 보여줍니다. 에러메세지는 사용자에게 친근한 언어로 구체적인 에러와 이유를 설명하고 있습니다.

이 페이지는 이 사이트의 다른 페이지들과 마찬가지로 일반적인 링크와 옵션을 포함하고 있습니다.

사용자가 다른 페이지로 이동할 수 있는 메뉴와 사이트 디스플레이를 제출할 수 있는 옵션이 상단에 마련되어 있습니다.

그리고 사용자가 원한다면 다가오는 컨퍼런스 일정 안내를 확일할 수 있는 링크도 보여집니다.

4. Behance

https://www.behance.net/error

Behance의 에러페이지는 페이지 중앙에 에러메세지가 있는 다른 사이트들과 같습니다.

페이지를 찾을 수 없다고 간단하게 상황을 나타냅니다. 그러나 이 메세지가 왜 나타났는지 유저가 뭘 잘못했는지는 알려주지 않습니다.

에러를 없애기 위해 다른 갤러리나 프로젝트로 이동할 수 있는 옵션을 제공합니다. 이를 위해 사용자가 클릭해서 넘어갈 수 있는 카테고리 리스트를 제공합니다.

인기있는 디자인 프로젝트들도 보여주고 있습니다.

5. Canva

https://www.canva.com/error

Canva의 에러페이지는 블러처리된 배경이미지 위에 다이얼로그창 에러메세지를 보여줍니다.

이 에러메세지는 사용자 친화적이지 않으며 기술적인 언어로 쓰여있습니다. 이것은 어떤 에러의 원인이 무엇인지, 어떤 에러인지 명확하지 않으며 이 에러를 없애기 위해 사용자가 무엇을 해야하는지도 정확하지 않습니다.

그러나, 홈페이지로 가는 링크는 페이지 오른쪽 하단에서 볼 수 있습니다. 클릭하면 이 사이트의 홈페이지로 이동하게 됩니다.

6. DesignerNews

https://www.designernews.co/error

DesignerNews의 에러페이지는 텍스트 없이 아주 심플한 구성입니다.

에러에 대한 설명이 전혀 없이 404라는 큰 이미지만 있습니다.

아마도 사용자가 404 에러코드를 이해하기에 충분히 학습되어있다는 전제가 있는 거 같습니다. 그렇지만 이건 올바른 가정이 아니며 디자이너는 사용자와의 갭을 이렇게 남겨두어서는 안됩니다.

홈페이지로 갈 수 있는 링크도 제공되고 있습니다.

7.Dribble

https://dribbble.com/error1

Dribble의 에러페이지는 사용자에게 멋지고 밝은 인상을 줍니다.

이 페이지는 404 에러 타입의 시각적인 요소를 활용하여 에러메세지를 표현하고 있습니다. 다른 추가 설명은 없습니다.

그리고 사용자가 에러페이지의 테마를 바꿔볼 수 있는 흥미로운 옵션이 제공됩니다. 이 페이지에 머무는 동안, 컬러테마를 가지고 놀아볼 수 있으며 404 이미지의 변화를 바로 확인할 수 있습니다.

게다가 홈이나 컨텍트 페이지 링크도 제공되고 있습니다.

검색옵션은 사용자가 그가 원하는 것을 찾을 수 있도록 해줍니다.

8. eBay

https://www.ebay.com/n/error

eBay의 에러페이지는 가장 심플한 것 중 하나입니다.

해당 사이트의 다른 페이지에서 노출하는 일반적인 옵션을 모두 포함하고 있습니다.

에러메세지는 페이지 중앙에 일반적인 말로 나타납니다. 메세지에서 어떤 특별한 에러 유형이나 이유 등을 설명해주지 않습니다.

홈페이지 링크를 사용해 다시 시작할 수도 있습니다. 또한 도움말 링크를 통해 사용자가 필요한 도움을 찾을 수 있도록 제공하고 있습니다.

검색 옵션을 통해 사용자는 원하는 항목을 찾을 수도 있습니다.

+ 내용추가

eBay에서 그 사이에 에러페이지를 리뉴얼 했더군요. After의 모습은 제가 따로 추가합니다! 바뀐 모습을 보니 모자를 뒤집어쓴 어린아이 모습을 통해 오류를 더 재미있게 전달하고 있습니다. 그리고 아래에 추천컨텐츠도 추가되었습니다. 기존의 오류 페이지보다 훨씬 사용자 친화적으로 변화한 룩입니다!