UX Director.

[ 서비스기획 & UX ] UIUX원칙 #1 : 모바일 사이트 디자인의 12가지 UX 원칙 가이드라인.

안다미로 : 담은 것이 그릇에 넘치도록 많게. 2024. 10. 7. 17:09

 

 

[ 서비스기획 & UX ] UIUX원칙 #1 

: 모바일 사이트 디자인의 12가지 UX 원칙 가이드라인.

 


 

 

∇ 모바일 사이트 디자인의 UX 원칙 가이드라인 12가지.


목 차
 
    1. 최적화
    2. Call-to-action button
    3. 메뉴는 짧고 유용하게
    4. 검색 기능은 눈에 띄게
    5. 글자 크기와 이미지를 확대할 필요가 없도록.
    6. 제품 이미지와 영상 파일은 질이 좋은 것만 사용
    7. 사용자 친화적인 터치 타겟
    8. 충분한 탐색
    9. 스크린 방향 안내
    10. 제품 이미지 확대 자유롭게 가능하도록
    11. 디바이스간 호환
    12. 하나의 브라우저( 주사용 브라우저 ) 윈도우 안에서 사용.

 

 


 

 

       Principle  1. 최적화.

                : 전체 페이지들을 모바일 기기 사이즈에 맞게 최적화해야 합니다.

                     ( 플렉서블 디자인 )


 

                    - 세로 방향 스크롤링만 사용하기

                    - 콘텐츠를 먼저 보여주고 불필요한 건 제거하기.

                    - 열(Column)의 개수 제한하기

                    - 데스크탑 페이지와 모바일 최적화 페이지  혼용하지 않기 등의 구체적인 방법들을 사용해야합니다.

 

참고 : 리디 기술 블로그

 

 


       Principle  2.  CAll-to-action button

                : 모바일 기기 환경에 맞게 유저의 행동을 자극하는 버튼( call-t-action button )을 만들어야 합니다

                       또한 cta 버튼은 직관적인 형태와 흐름구조를 가져야 합니다.


 

 


 

 

       Principle  3.  메뉴는 짧고 유용하게.

                :메뉴는 짧고 유용하게(효율적인 기능을 하도록) 만들어야 합니다.

 

                 메뉴 카테고리는 최대 7~8개를 넘지 않아야 합니다.

 

                 또한 메뉴를 효율적으로 기능하게 만들기 위해서는

                  페이지별 인기도나 유저가 느끼는 가치도/중점도에 따라서 순서를 정하고

                  유저가 이해할 수 있는 용어들로만 구성해야 합니다.


참고예시 : 무신사

 


       Principle  4.  검색 기능은 눈에 확 띄도록.

                            : 페이지마다 사용되는 검색기능은 눈에확실히 띄도록 만들어야 합니다.

 


 

 


 

       Principle  5.  글자 크기와 이미지 확대할 필요가 없도록 만들기. (시인성 확보)

                            : 페이지에 사용된 글자와 이미지는 뷰의 확대 없이 인지할 수 있도록 디자인해야 합니다.


 

 


       Principle  6.  페이지에 사용된 이미지/영상 파일은 질이 좋은 것만 사용합니다.

                            : 제품 이미지와 영상이 곧 제품을 사용자에게 인식시키기 때문에

                                    퀄리티가 좋은 것만 사용해야 합니다. 

                               최근에는 단순한 이미지와 영상을 넘엇 3D 모델링/효과가 적용된 것을 활용하기도합니다.

 


참고: 토스의 3D 활용

 

 


 

       Principle  7.  사용자 친화적인 터치 타겟

               : 모바일 기기와 인터렉션하는 유저의 손가락에 친화적으로 반응하는 터치 타겟을 만들어야 합니다.

 

                      - Mit Touch Lab의 연구에 따르면,

                         손가락 첫 마디의 아랫부분 평균 길이는 10~14mm이며 

                         손가락 끝 구분을 8~10mm라고 합니다.

 

                         ∴ 터치 타겟의 크기는 가로*세로  10mm*10mm면 좋고,

                                타겟 사이의 거리는 10px 이상이어야 합니다.

 


                     

 


 

       Principle  8.  충분한 탐색.

               : 프러덕트를 사용하는 유저가 우리 서비스를 충분히 탐색할 수 있도록 해줘야합니다.

 

                      - 너무 일찍부터 가입을 강요하면, 85%이상의 유저가 사이트를 떠날 수 밖에 없습니다.

                         

                      - 페이지를 방문한 유저는 서비스/사이트의 내용을 충분히 확인 한 후에

                         개인정보를 제공하려 하기 때문에 전환율을 높이기 위해서는 이 과정의 장벽을 낮춰줘야 합니다.

 

                     - 가입/로그인 없이 서비스를 이용할 수 있는 방법 제시, 비회원 구매 등의 방법을 제공하고

                       가입은 추가적이고 핵심적인 가치를 제공할 때만 요청하되 최소한의 개인정보데이터를 요규해야 합니다.

 


 

 


 

       Principle  9.  스크린 방향 안내.

               : 스크린 기능을 적용한 부분에서는, 유저가 스크롤 방향을 직관적으로 알 수 있도록 표시해줘야 합니다.

 

                      - 방향이 가로이건, 세로이건 유저는 방향을 바꾸려고 할 때 쉽게 알 수 있어야 합니다.


 


       Principle  10.  제품 이미지 확대가 가능하도록.

               : 제품 이미지는 유저가 확대해서 보고 싶을 때 확대 가능하게 만들어야 합니다.

 

                  특히 제품의 상세페이지에서 중요한데, 

                  유저는 제품의 디테일을 보기 위해 확대 정도를 조절하고 싶어하기 때문에

                  한 가지 확대 비율만을 제공하지 말고 확대 정도를 조정할 수 있게 해줘야 합니다.

 


 

 


 

       Principle  11.  디바이스간의 호환성.

               : 유저가 서비스를 사용함에 있어서, 다른 디바이스로도 옯겨서 사용하기 쉬워야 합니다.

 

                  특정 유저들은 모바일화면으로는 제품 검색만을 하고 추후에 타 디바이스에서 볼 수 있도록,

                       정보를 쉽게 저장(장바구니, 위시리스트, 즐겨찾기 등)하고 공유(이메일,sns등) 할 수 있도록 해줘야합니다.


 


 

       Principle  12.  하나의 브라우저 윈도우 안에서 이용.

 

               : 하나의 브라우저 윈도우 안에서 이용할 수 있어야 합니다.