본문 바로가기

웹디자인

(28)
효과적인 후원페이지 만들기 우리는 웹사이트를 서핑하면서 수많은 서식(Form)을 사용합니다. 회원가입, 결제, 후원페이지 등 서식 페이지는 개인정보나 금액이 오고 가기 때문에 매우 중요합니다. 하지만 우리는 복잡한 서식페이지에 들어가면 작성을 포기하거나, 실수를 합니다. 이런 상황에는 사용자의 책임도 있지만, 제작자들의 책임이 더 크다고 생각합니다. 그럼 제작자 입장에서 사용자들이 편하게 사용할 수 있는 서식페이지 만들라면 어떻게 해야 할까요? 웹디자이너 브래드 프로스트(Brad Frost) 씨는 피츠버그푸드뱅크(Pittsburgh Food Bank)의 후원페이지를 효과적으로 리디자인했는데요. 그는 다음 10가지 사항을 고려해서 디자인했습니다. 눈에 잘 띄는 곳에 배치하기불필요한 요소 제거하기내용이 많은 페이지는 단계로 나눠서 구..
모바일웹에서 헤더를 꼭 고정해야 될까요? 모바일 웹을 서핑 하다 보면 크게 3가지 유형의 웹사이트를 발견할 수 있습니다. 고정된 헤더 (주로 내비게이션 아이콘과 함께 있습니다.)보통의 헤더 (콘텐츠와 같이 스크롤 되는 헤더입니다.)하단 고정 내비게이션(탭이나 옵션이 들어간 내비게이션; 앱에서는 많지만 웹에서는 별로 없습니다.) 일반적으로 제작자들은 고정된 헤더를 선호합니다. 메뉴 혹은 다른 버튼을 쉽게 클릭하기 좋기 때문입니다. 웹에이전시 엑시스웹(exis web)의 제임스 포스터(James Foster) 씨는 이러한 헤더 위치 종류가 사용자에게 어떤 영향을 미치는지 궁금했습니다. 그래서 A/B 테스트를 진행했는데요, 결과는 아래와 같습니다. *A/B 테스트란? 서로 다른 디자인이나 기능을 보여주고 사용자의 반응을 비교하면서 보다 좋은 디자인을..
무심코 사용하는 UX, 어떻게 바꿀까 오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. North는 “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 1. 슬라이드 배너(Carousel) 슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화..
웹 인터랙션 인포그라피를 만나다 마우스 제스처나 휠 스크롤에 따라 반응하는 재밌는 웹사이트를 보신 적 있나요? 인포그래픽에 인터랙션을 더해 재밌게 만들어 놓은 웹사이트를 소개합니다. 1. 원 페이지 웹사이트 웹 인포그래픽을 세 가지 유형으로 나눠봤습니다. 그 중 첫 번째는 최근 유행하는 트렌드인 원 페이지 스타일입니다. 말 그대로 링크 이동 없이 사용자가 지금 보고 있는 하나의 페이지에서 모든 콘텐츠를 보여줍니다. 원 페이지 스타일의 웹사이트들을 모아 놓은 ONE PAGE LOVE(http://onepagelove.com/ )라는 사이트가 있을 정도인데요. 원 페이지 스타일은 정보를 한 눈에 보기 쉽게 정리해야 하는 인포그래픽에 적당합니다. ONE PAGE LOVE(http://onepagelove.com/ ) 아래 웹사이트는 최근 오..