모바일 UI

안녕하세요

날라리기획자입니다.

작년부터 생각해 둔 모바일 UI가 있는데요. 오늘 시간이 남아 살짝 끄적여 봤습니다.

오랫만에 PPT를 만지니 버벅되기도 하고 퀄리티도 엄청 떨어졌는데 일단 여러분들께 평가도 받고 또 자신의 앱에 적용해 보고 싶으신 분들은 해보시라고 이렇게 공유해 봅니다.

다 만들고 다른 기획자 (출신) 님께 여쭈어 보니 Path에서 비슷한 것을 사용하고 있더라고요. 어째든 표절은 아니고 제 머리속에서 나온 실제 진짜 UI입니다.

이 UI의 목적은 

1. 화면 전체 쓰기 

  - 이 UI 기획 당시 아이폰4를 사용했는데 화면을 그리거나 다른 앱을 보다보면 네비나 타이틀 그리고 하단 메뉴의 영역을 쓰고나면 정작 컨텐츠 영역이 매우 좁아져 생각하게 되었습니다.

2. 오른속, 왼손잡이 충족

  - 오른손 잡이 인데도 스마트폰을 쓸때 왼손으로 컨트롤하는 분들이 많이 있으시더라구요. (제 주위만 그럴 수도...) 그래서 고정된 메뉴가 아닌 사용자에 맞는 UI를 생각해 내었습니다.

3. 대화면에서의 사용성 증진 (화면이 크더라도 한 손으로 사용하자)

  - 스마트폰 화면은 점차 커지고 있습니다. 저도 큰 화면으로 바꾸고 싶었지만 한 손에서 컨트롤 할 수 있는 아이폰이 더 마음에 들었습니다. 지하철이나 버스에서 대화면의 스마트폰을 사용하시는 분들을 유심히 지켜본 결과, 메뉴 및 화면 이동 시 항상 한 손에 스마트폰을 잡고 다른 손으로 대각선 상단의 이동 버튼을 누르는 불편함을 보고 이 UI를 생각하게 되었습니다.

네, 이러한 목적의 모바일 UI를 구상하게 되었습니다. 그럼 이전 모바일 화면은 어땠는지 한 번 볼까요?

그럼 제가 기획한 UI 내용을 공유합니다. 아이폰5 기준입니다.

1. 사용자의 시선 확인

대부분의 사용자는 다음의 이미지와 같은 위치에 시선을 고정합니다.

2. 메뉴 및 타이틀

메뉴와 타이틀의 영역 그리고 그의 설명입니다.

사용자가 주로 보는 시선의 위치와 엄지 손가락의 위치를 고려하여 메뉴를 배치하였습니다. (참고로 웹에서만 앞으로 버튼이 필요합니다. 그러므로 일반 앱은 뒤로가기만 있어도 충분합니다.)

3. 왼손이용 시

해당 열쇠 아이콘을 드래그하면 왼쪽 편으로 이동하게 됩니다. 

이때 관건은 아무리 사용자의 시선을 벗어낫다고는 하지만 컨텐츠 영역을 너무 심하게 가리면 안된다는 것입니다. 그리고 지금은 신문기사, 텍스트 위주의 화면이기 때문에 색이 너무 진하게 들어가게 되면 사용자의 리딩을 방해할 수 있기 때문에 색을 최대한 뺀 것입니다. (물론 지금 회사에서는 저에게 포토샾도 없고 해서 일단 대강의 아이콘을 적용한 것입니다.)

즉, 자신이 개발하고자 하는 앱의 사용성, 디자인(색채 등)을 감안하여 해당 아이콘과 버튼을 적절히 조정해야 합니다.

4. 메뉴 활성화

해당 열쇠 아이콘을 터치하면 메뉴가 활성화 됩니다.

메뉴가 활성화된 모습니다. (열쇠모양의 아이콘이 변경된 것을 볼 수 있습니다.) 앞으로 뒤로의 버튼이 확대 되었으며 그 아래의 영역에는 앱 또는 웹의 메뉴가 노출됩니다.

각 앱에 따라 다양한 기능과 인터렉션을 주셔도 무방할 듯합니다. (예를 들어 사용자가 임의로 메뉴를 구성할 수 있는 기능(퀵링크 등)을 주어 해당 메뉴를 열면 사용자의 메뉴 먼저 나오는 방식)

메뉴가 많다면 해당 메뉴 영역을 드래그하면 메뉴가 나올 수 있게 만들 수도 있습니다.

(참고: 메뉴와 이동에 관한 UI입니다. (개인적인 의견으로는 복잡한 기능이 달린 앱보다는 신문, 잡지 등 리딩성 앱에 적합하다고 생각합니다.) 어떠한 화면에서 '추가', '가입'의 화면단 기능이 필요한 경우는 메뉴 영역 또는 상단의 네비게이션 메뉴에(이전과 같이) 사용하셔야 합니다.)

어떠신가요?

제가 이미지로 변환하여 휴대폰에 넣고 실제로 해봤는데 전 편하더라구요. ㅎㅎㅎ

이 UI를 가져다 쓰셔도 좋지만 그래도 댓글정도는... ㅎㅎㅎ

이상입니다.