404 Not Found _ UX 디자인과 개발
모든 경우의 수를 대비합시다!
디자인 작업을 끝내고 잠시 숨을 돌리고 있던 어느 날, 갑자기 팀장님에게 연락이 왔다…!
404 Not Found Page?
‘HTTP 404 또는 찾을 수 없습니다’라는 오류 메시지는 클라이언트가 서버와 통신할 수는 있지만 서버가 요청한 바를 찾을 수 없다는 것을 가리키는 HTTP 표준 응답 코드다.
브랜드마다 ‘404 Not found’를 통해 다양한 이미지와 성향을 보여줍니다. 사실 사용자에게 보이지 않을수록 좋은 페이지면서, 없으면 당황스러운 페이지라 기획과 디자인 작업을 할 때 잊기 쉽습니다.
네… 그렇게 저는 잊어버렸죠…
학부생, 그리고 취업준비생 시절 404 페이지를 중요하게 여겨 디자인한 적은 없었습니다. 주로 메인 기능, 문제가 되는 기능을 고려해 포트폴리오와 프로젝트를 진행했으니 그 당시에는 ‘이걸 꼭 해야 하나?’ 생각했죠.
하지만 현업에선 모든 경우의 수를 대비해야 합니다. 완벽한 개발로 굳이 만들 필요가 없는 상황이 제일 좋겠죠. 다만 혹시 모를 문제 발생을 위해 404 페이지 작업은 필수입니다. 에러가 발생했을 때를 위해 한 페이지만 작업해두면 다양한 경로에서 호출될 수 있는 사용성이 높은 페이지지만, 자주 보이면 안 되는 아이러니한 페이지입니다.
그렇다면 다른 브랜드는 404 페이지를 어떻게 만들었을까요? 작업 전, 참고할 수 있는 레퍼런스를 찾았습니다.
404 Not Found Page Point
1. 의도 : 돌아가거나 새로운 길을 알려주거나
기본적으로 모든 앱, 웹 페이지에는 기획 의도가 있습니다. 사용자의 구매를 유도하거나, 정보를 보여주기도 합니다. 404 Not Found 페이지 또한 의도치 않게 길을 잃고 에러를 만난 사람에게 이전으로 돌아가거나 새로운 길을 알려주는 의도를 제시해야 합니다. 평소처럼 예상했던 페이지가 아니라 당황했을 사용자에게 뒤로 가기, 새로운 검색 혹은 다른 위치로 이동할 수 있는 버튼 클릭을 유도해 에러에서 벗어나도록 해야 합니다.
Adobe는 직관적으로 웹사이트로 돌아갈 것인지, 검색할 것인지 두 가지 선택지를 보여줍니다
2. 안내 : 마이크로카피(Microcopy)를 잊지 말자
사용자를 안심시키기 위해 문제가 생기기 전으로 돌아갈 수 있도록 대안을 제시하는 것이 최선의 해결책입니다. 그러기 위해선 사용자에게 문제 해결 기능을 알려줘야 합니다. 이때 사용되는 이미지와 안내 텍스트는 404 페이지에 대한 설명, 해당 페이지를 벗어날 수 있는 행동 가이드를 사용자가 이해할 수 있도록 표현해야 합니다.
Note는 404 페이지가 왜 발생했는지 알려주면서 문제의 원인과 해결 방법으로 홈으로 돌아갈 수 있는 버튼을 보여줍니다.
3. 통일성 : 디자인과 구성 요소의 톤앤매너
갑자기 에러가 났는데, 지금까지 봤던 디자인도 달라진다면? 사용자는 당황할 수밖에 없습니다. 이전 페이지까지 보았던 디자인과 일괄된 디자인 시스템을 유지하면서 현재 위치와 앞으로 할 수 있는 해결방법을 함께 화면에 녹여내야 합니다. 보편적으로 404 페이지는 하나의 디자인으로 다양한 경로에서 문제 발생 시 호출될 수 있다는 점을 기억해야 합니다.
4. 재치 : 당혹감과 불쾌감을 줄여주기
딱딱한 문구로 안내한다면 사용자는 해결방법을 알게 됐지만 불편한 기억으로 남아 서비스 평가에 큰 영향을 줄 수 있습니다. 본래 사람이란 부정적이고, 불편하며, 당황스러운 일을 즐겁고 편리했던 기억보다 더 오래 기억하며, 평가 시 부정적인 기억에 더 높은 비율로 반영하기도 합니다. 그러니 당혹감과 불쾌감을 줄이는 것은 놓칠 수 없는 요소입니다.
MailChimp은 잃어버린 페이지를 찾는 것처럼 구멍 속에 얼굴을 넣은 동물 이미지를 이용해 현재 상황을 재치있게 보여줍니다.
