본문 바로가기

UX

 (22)
스크롤 UI를 대체하는 방법이 있을까요? 요즘 웹에서는 화면을 꽉 채우는 사진을 배경과 함께 타이포그래피를 적절하게 배치하는 디자인이 유행하고 있습니다. 유명 웹 에이전시 사이트를 봐도 이런 디자인을 많이 찾아볼 수 있는데요. 이런 큼직한 디자인에서는 스크롤을 유도하는 UI가 자주 보입니다. 한편 브이텍스 랩(VTEX Lab)의 UI 디자이너 로드리고 뮤니즈(Rodrigo Muniz) 씨는 이런 스크롤 ui의 필요성에 대해 의문을 가지고 글을 썼습니다. “당신이 그것을 설명해야 한다면, 그것은 작동하지 않는 것입니다.(If you have to explain it, it’ ain’t working)”라고 그래픽 디자인의 거장 밀튼 글레이저가 말한 적이 있습니다. 만약 스크롤을 유도하는 UI를 넣는다면 사용자의 인지하는 과정을 무시하는 것일지도 ..
기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마! 친절한 웹사이트는 어떤 모습일까요? 사용자가 생각하지 않고 쉽게 이해 가능한 사이트가 아닐까요? 한 권의 책, "(사용자를) 생각하게 하지마"를 통해 그 방법을 알아볼게요. 스티브 크룩(Steve Krug)이 지은 이 책은 화려한 UX가 아닌 기본에 충실한 UX를 보여줍니다. 웹 실무에 바로 적용 가능한 기본 팁들과 왜 그렇게 적용되는지 이유도 쉽게 설명되어 있어요. 종종 귀여운 카툰도 등장하고요. 다 읽고 난 다음엔 카툰이 먼저 생각나는 묘한 책입니다. 친절한 웹 사이트를 만드는 방법은 많이 있습니다. 그럼 가장 핵심에 다가가는 방법은 어떤 것일까요? 아마도 화려한 테크닉이 아닌 조용하지만 강한, 즉 기본에 충실한 UX가 사용자에게 감동을 준다 생각합니다. 그럼 이 책에 담겨있는 "관례 사용하기" 부분..
클릭을 유도하는 이름 붙이기 웹사이트를 이용할 때 예상치 못한 페이지로 이동할 때가 종종 있습니다. 그 이유로는 여러 요소가 있겠지만, 직접적으로는 버튼이나 메뉴의 이름이 불명확하거나 잘못된 표기로 인한 것이 많습니다. 웹을 현실 세계를 비교한다면, 버튼이나 메뉴는 다른 곳으로 향하는 "문"이며, 버튼에 적힌 이름은 그 문이 어느 곳으로 통하는지 알려주는 "이름"입니다. 오늘은 웹사이트 메뉴 버튼의 이름이 얼마나 중요한지를 알려드립니다. 웹사이트에 필요한 버튼을 디자인 하기 전, 우리는 주로 아래와 같은 사항을 고려합니다. -사용자가 버튼으로 인식하기에 적절한가?-사용자가 다른 페이지로 이동하는 링크라는 점을 인식하는가? -플랫디자인 or 그라데이션을 사용하는가?-적절한 버튼의 위치는? 위 사항처럼 버튼의 외형적인 부분에 치중한 나..
모바일웹에서 헤더를 꼭 고정해야 될까요? 모바일 웹을 서핑 하다 보면 크게 3가지 유형의 웹사이트를 발견할 수 있습니다. 고정된 헤더 (주로 내비게이션 아이콘과 함께 있습니다.)보통의 헤더 (콘텐츠와 같이 스크롤 되는 헤더입니다.)하단 고정 내비게이션(탭이나 옵션이 들어간 내비게이션; 앱에서는 많지만 웹에서는 별로 없습니다.) 일반적으로 제작자들은 고정된 헤더를 선호합니다. 메뉴 혹은 다른 버튼을 쉽게 클릭하기 좋기 때문입니다. 웹에이전시 엑시스웹(exis web)의 제임스 포스터(James Foster) 씨는 이러한 헤더 위치 종류가 사용자에게 어떤 영향을 미치는지 궁금했습니다. 그래서 A/B 테스트를 진행했는데요, 결과는 아래와 같습니다. *A/B 테스트란? 서로 다른 디자인이나 기능을 보여주고 사용자의 반응을 비교하면서 보다 좋은 디자인을..
코드로 디자인한다. framer.js 1. 모바일 디자인과 프로토타이핑 모바일 시대가 열리면서 과거와는 달리 미디어 디자인에 있어 “인터랙션”이 매우 중요한 요소가 되었습니다. 단순히 예쁜 아이콘과 배경을 벗어나 사용자의 터치에 따라 재밌게 반응해야 하는 디자인이 필요하게 된 것이죠. 앱을 조작하는 손맛(!)을 주기 위해 디자이너들은 터치하면 튕기는 아이콘, 좌우 스와이프에 따라 부드럽게 열리는 메뉴, 화면을 아래로 당기면 새로 고침 되는 페이지 등 다양한 인터랙션을 고민하고 있습니다. 그런데 우리가 즐겨 쓰는 포토샵이나 파워포인트로는 이런 손맛을 설명하기 어렵습니다. 그렇다고 인터랙션을 일일이 동영상이나 움직이는 이미지(Animated gif)로 만들어 주기에는 너무 힘이 듭니다. 그래서 등장한 도구들이 소위 프로토타이핑 도구라고 하는 O..
무심코 사용하는 UX, 어떻게 바꿀까 오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. North는 “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 1. 슬라이드 배너(Carousel) 슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화..

티스토리툴바