iOS 아홉 번째 일기 : iOS Academy 2주차 라이브 수업/프로토타입/목업/ 앱UX 주의점

#  iOS 여덟 번째 :  커리큘럼 오버뷰

   iOS Academy 라이브 강의 3주차

 

프로토타입 준비하기

앱 UX 기획시 주의할점

 

iOS Human Interface Guidline를 참고해서 프로토타입을 작성해야한다.

아래의 애플 개발자 사이트에서 참고하면된다.

 

https://developer.apple.com/design/resources/

Apple Design Resources

 

 

 

Do & Don't : 앱 디자인의 초보자들이 흔히하는 실수들

 

우리가 만드는 어플은 사이즈가 맞아야 한다.

 

왼쪽은 좋은 예, 오른쪽은 나쁜 예

 

오른쪽은 모바일 UI가 아니다.

오른쪽 캘린더는 PC나 웹에서 쓰던 방식, 모바일 UI가 아니다.

오른쪽은 화면을 쪼개서 사용된다.

모바일에서는 화면을 쪼개서 사용하면안되고,

하나의 특정기능을 제공할때는 화면을 쪼개는것이 아닌, 기능의 하나하나 단계를(스탭을) 쪼개서 사용한다.

 

44 X 44

정확한 탭을 위해서는 44 X 44를 지켜야한다.

아이폰을 거꾸로들고 사용하면, 탭이 잘 되지 않는다.

위의 크기는 사람이 무의식적으로 엄지로 탭할 수 있는 최소의 크기이다.

즉, 편하게 사용할 수 있는 최소의 크기이다.

 

글자는 최소 11포인트 이상되어야, 확대기능을 사용하지 않고서도 편하게 읽을 수 있다.

글자가 명확하게 대조되어서 시각적으로 인지하기 편해야한다.

높은 해상도는 필수!

동행비가 깨지면 안된다

 

좋지 않은 UX의 예시

왼쪽의 슬라이드 메뉴는 사용하면 안된다.

사용할 이유가 없다. 효율성이 떨어진다.

모든 형태는 이유를 가져야하고, 왜 그런지 설명해야한다.

형태는 기능을 따른다.

슬라이드 메뉴 UI는 잘 정리하면 오른쪽의 탭 형태로 정리해 낼 수 있다.

좋은 앱 일수록 하나의 테스크를 해결하는데 있어서 탭의 수를 줄인다.

왼쪽의 경우 최소한 슬라이드를 여는 한번의 탭이 필요하다.

또한 슬라이드는 공간이 넓어서 메뉴가 복잡해진다.

메뉴가 방대하다보니, 모든걸 한번에 슬라이드 메뉴에 넣는다.

깔끔하고 명확한 테스크가 없어진다.

 

앱의 첫화면에 컨텐츠가 보여야 한다.

첫 화면이 회원 가입이나 로그인을 보여준다면

무엇에 사용하는 앱인지 몰라서 사람들이 이용을 하지 않는다.

회원가입이나 로그인이 앱 사용자 최초유입의 장애물이 된다. 

 

페이스북 UI 변화

최초의 아이템이 컨텐츠를 정리하는 과정에서 발전된다.

만약 페이스북이 초기단계에서 지금과 같은 UI/UX를 갖고 있다면 이용이 됬을까??

아닐 확률이 높다.

때문에 앱의 최초 기획은 단순해야하고, 사용자들의 이용에 맞춰 점차 진화해야한다.

 

 

 

앱 화면기획 제작 과정

 

 

첫 번째가 더 안정적이다.

 

 

엄지손가락으로 사용하기 좋은 범위

 

 

 

 

 

 

앱의 흐름은 컨텐츠를 중심으로 구성해라

내가 하고자하는 목적에 맞게 검색을 눌렀으면, 검색과 관련된 컨텐츠들이 나오도록 구성해야 한다.

 

 

 

같은 기능을 구현하는 방식은 1가지만 적용

키보드로 숫자입력과 커브를 활용한 숫자입력을 동시에 사용하면 사용자가 헷갈린다.

명확함이 없다.

 

 

 

 

 

사진으로 바로 업로드하는 기능은 탭바가 아니고 버튼이다.

기능을 탭바로 오해할 수 있는 상황이 생긴다. 

그런데 기능 버튼을 누루면 뒤로 돌아가기를 눌러야한다.

이렇게 기능과 탭바과 함께 구성한다면 개발적으로 어렵기 때문에 많은 고민이 필요하다.

인스타그램의 경우 사진 업로드가 핵심 기능이기 때문에 위와 같이 탭바를 구성했다.

 

 

 

 

 

 

 

 

 

 

 

햄버거에서는 뒤로 돌아가기 버튼과 탭버튼의 동시사용이 힘들다.

오른쪽의 iOS에서는 뒤로 가기 버튼과 탭 버튼의 동시 사용이 가능하다.

탭바에 많은 메뉴를 몰아 넣을 수 있기 때문에 너무 많은 내용을 담게 되고, 사용자 이용에 불편함이 생긴다.

 

 

 

 

 

장애가 있는 분들도 사용하기 편하게 만든다면, 누구나 사용하기 편할 수 있다.

즉 직관적이고 간단하게

 

 

 

 

 

과제

UI Stencil  - https://developer.apple.com/design/resources/

ADS시트에 앱 이름을 올려야 한다.

맥에서 command + shift + 5를 누루면 바로 화면 녹화가 가능하다.