UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다.



1. UI의 9가지 상태

UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다.



UI의 9가지 상태 ➔ 더 읽기



2. 모바일 사용자 UX의 시작, 터치 제스처

터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해한다면 디자이너, 개발자, 프로젝트 담당자의 소통이 명확해질 것입니다.


모바일 사용자 UX의 시작, 터치 제스처 ➔ 더 읽기




UI디자인에서 버튼이나 메뉴는 다른 곳으로 향하는 '문'입니다. 버튼의 형태나 스타일만큼 중요한 것은 '문의 이름'입니다. 메뉴 버튼의 중요성과 적합한 메뉴명을 결정하는 요소를 알아봅니다.

클릭을 유도하는 이름 붙이기 ➔ 더 읽기




스크롤로 제어하는 원 페이지 구조가 등장하면서 세로형 내비게이션 메뉴도 많이 볼 수 있게 되었습니다. 웹사이트를 디자인할 때 사용하는 세로형 내비게이션이 무엇인지와 세로형 내비게이션 메뉴 활용법을 3단계로 나누어 알아봅니다.

웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 ➔ 더 읽기




사용자의 명령을 인식하거나 긴급 상황을 알리는 데 사용하는 모달 창 (Modal window)는 사용자의 작업 흐름을 흐트러트릴 수 있습니다. 그래서 모달 창 버튼의 색상 사용이 중요합니다. 모달 창 버튼의 3가지 성격에 맞는 색상 지정 방법을 알아봅니다.

버튼색상에도 정답이 있다 ➔ 더 읽기



6. 스크롤 UI를 대체하는 방법이 있을까요?

화면을 꽉 채우는 배경 이미지와 함께 타이포그래피를 적절히 배치하는 디자인이 많아지고 있습니다. 이런 디자인에서는 스크롤을 유도하는 UI요소가 자주 보이는데요, '스크롤을 해주세요'와 같은 요소를 넣는 것은 자연스러운 콘텐츠의 이해를 방해할 수 있습니다. 스크롤 안내 요소 없이 자연스럽게 스크롤을 유도하는 방법을 알아봅니다.


스크롤 UI를 대체하는 방법이 있을까요? ➔ 더 읽기



7. 모바일웹에서 헤더를 꼭 고정해야 될까요?

모바일 웹을 서핑 하다 보면 1. 고정된 헤더, 2. 콘텐츠와 같이 스크롤 되는 헤더, 3. 하단 고정 내비게이션 (주로 앱에 많습니다.)를 발견할 수 있습니다. 제작자들은 메뉴를 쉽게 클릭할 수 있는 고정된 헤더를 선호하는데요, 어떤 방식이 더 좋을까요? A/B 테스트를 통해 얻은 인사이트를 공유합니다.


모바일웹에서 헤더를 꼭 고정해야 될까요? ➔ 더 읽기




8. 새로운 UI로써의 No-UI

새로운 기술은 그에 적합한 새로운 디자인적 접근이 필요합니다. 새로운 기술이 가져다주는 NO-UI를 이해하는 글을 읽어보세요.


새로운 UI로써의 No-UI ➔ 더 읽기





Posted by slowalk



모바일 웹을 서핑 하다 보면 크게 3가지 유형의 웹사이트를 발견할 수 있습니다.


  • 고정된 헤더 (주로 내비게이션 아이콘과 함께 있습니다.)

  • 보통의 헤더 (콘텐츠와 같이 스크롤 되는 헤더입니다.)

  • 하단 고정 내비게이션(탭이나 옵션이 들어간 내비게이션; 앱에서는 많지만 웹에서는 별로 없습니다.)


일반적으로 제작자들은 고정된 헤더를 선호합니다. 메뉴 혹은 다른 버튼을 쉽게 클릭하기 좋기 때문입니다. 웹에이전시 엑시스웹(exis web)의 제임스 포스터(James Foster) 씨는 이러한 헤더 위치 종류가 사용자에게 어떤 영향을 미치는지 궁금했습니다. 그래서 A/B 테스트를 진행했는데요, 결과는 아래와 같습니다. *A/B 테스트란? 서로 다른 디자인이나 기능을 보여주고 사용자의 반응을 비교하면서 보다 좋은 디자인을 결정하는 테스트


고정된 헤더와 스크롤되는 헤더의 A/B 테스트


제임스 씨는 두 가지 테스트를 준비했습니다.

A. 헤더가 콘텐츠와 스크롤 되는 경우




B. 헤더를 고정한 경우





공통으로 상단에 45px 크기의 헤더가 있습니다. A는 헤더가 콘텐츠와 함께 움직이고, B는 고정되어 있습니다. 이 두 가지 경우에 메뉴의 로고, 검색 버튼 클릭 수와 사용자 활동 수(세션)이 어떻게 차이가 나는 지 측정했습니다.



테스트 결과

약 100,000 모바일 방문자들이 테스트했습니다.




사용성 측면에서만 봤을 때 큰 차이점을 보이는데요.

B. 고정된 헤더가 A. 보다 3배 높은 메뉴 클릭 수를 보여줍니다.





하지만, 두 결과에서 사용자 활동 횟수는 차이가 없습니다. 


즉 사용자가 고정된 헤더에서 메뉴 클릭은 많지만, 사용자들의 실질적인 활동 수는 차이가 없었습니다.


또한, 구글 애널리틱스 데이터를 통해 A, B 헤더별 ‘검색 기능 사용 횟수’를 참고해 보았는데요, 데이터에 따르면 고정된 헤더는 545번, 스크롤 헤더는 452번 사용했다고 합니다. ‘검색 기능 사용 횟수’도 A/B 헤더가 큰 영향을 미치지는 않는 것 같습니다.


결론


그렇다면 모바일웹에서 어떤 헤더 방식이 더 좋은지 정답이 있을까요? 정답은 없습니다. 테스트 결과를 살펴보아도, 결정적으로 두 경우에 사용자 활동 수가 거의 동일했습니다. 고정된 헤더는 시야에 계속 따라다니니, 버튼 클릭 수가 좀 더 많을 수 있겠죠. 그렇지만 헤더 자체가 새로운 페이지로 들어갈 필요성까지 가져다 주지는 못 했습니다.


페이지 조회 수를 높이는 것이 목표라면, 헤더의 위치를 떠나 사이트를 완성도 있게 작동하게 하는 것이 좋은 방법이라고 생각합니다.




출처: exis web


by 원숭이 발자국



Posted by slowalk