AppStore Session ) 디자인 챌린지 Part. 2

 

 

 

들어가면서

---

• 디자인 챌린지란?
  일반적인 디자인 원칙을 애플이 어떻게 적용하고 있는지 살펴보고,
  실제 앱에 어떻게 적용할 수 있는지 공유하는 세션.
  
  
• 앱을 만들 때 아래 4가지를 유념하면서 인터페이스를 만들어라.
  • 예측 가능성과 안정성
  • 명확하고 도움이 되는 정보
  • 자연스럽고 단순한 워크플로우
  • 즐거운 경험

 

 

2가지 주제와 Q&A 로 진행

---

1. 사용성 : 어포던스, 일관성, 근접성, 그룹핑
2. 피드백
3. Q&A

 

 

피콜로 앱

---

• 커피를 주문할 수 있는 실습용 앱.
• Part.1 과 마찬가지로, 피콜로 앱으로 실습하며, 디자인 이론을 살펴볼 것임

 

 

 

사용성 1. 어포던스( Affordance ) ( 행동 유도성 )

---

• 접시가 있을 때 우리는 무엇을 할 수 있는가?
  • 음식을 올린다, 접시를 돌린다, 접시를 이동시키거나 던진다. 등등
  • 이런 상호작용을 자연스럽게 떠올리는 것을 행동 유도성이라고 한다.

 

• 사람(개체) 마다 다르게 작용한다. (주관적이다)
  • 나에게는 접시 던지기가 가능하지만,
  • 강아지는 던질 수 없다. 오로지 잡기만 가능.

 

•  

• 맥북의 경우
  
  • 맥북 하단의 작은 홈은 맥북이 닫혀있을 때 손가락을 넣고 여는 것이라고 행동을 유도함

 

• 각종 UI 요소들의 경우
  • 슬라이더는 드래그를,
  • 다이얼은 돌리기를,
  • 버튼역시 누르기를, (파란색깔 역시 누르기를 유도함)
  • 캐로셀의 마지막 셀을 잘르면 스와이프를 유도한다

 

• 행동 유도성은 다음 질문에 대한 답을 준다
  • 무엇과 상호작용 할 수 있지?
  • 어떻게 상호작용하지?
  • 그 상호작용으로 무엇을 할 수 있지?

 

• 어포던스는 앱 아이콘과 이름에도 들어있다.

 

• 어포던스를 잘 전달하는 방법
  • 1. 색상 
    어느 부분이 인터랙티브한지 알려주기
    브랜드 컬러를 인식시키기
    인터랙티브 하지 않는 곳에 해당 컬러를 사용하지 말 것
    
    아래 캘린더의 경우, 우측보다 좌측의 모두 빨간색이 더 적절함
    Accept를 강조하고 싶다면 Bold를 사용할 것
    
    중국의 경우, 초록색이 부정적인 의미라서
    주식 앱의 색깔이 반대 ( 초록색 <-> 빨간색 )

 

• 2. 언어 
  액션 버튼이나 타이틀에 Add, Done, Cancel 등의 텍스트
  행동을 나타내는 동사를 사용할 것
  
  
• 3. 크기 & 두께
  bold처리 등
  
  
• 4. 심볼 & 액세서리
  꺽쇠, 돋보기, 플러드 등의 아이콘
  
  • 플로피 디스크 아이콘은 저장을 뜻한다? => 어린 세대는 모를 수 있음
  • 피콜로 앱에서 장바구니가 카트모양? => 커피 앱 이니까 홀더백이나 종이가방을 사용하는게 더 적절함

 

• 5. 모양
  앱 아이콘이 둥근 이유 => 터치 가능해보임
  
  
• 6. 근접성
  필요한 타이밍과 위치에 필요한 기능을 넣기

 

 

어포던스 실습 챌린지!

---

피콜로 앱의 음료 선택 화면을 어포던스를 잘 전달하게 수정하기

• 인러택티브한 색상
  흰색(뒤로가기), 회색(체크버튼, +-버튼), 갈색(구매버튼) => 갈색으로 통일
  인터랙티브 하지 않은데 갈색을 사용하던 네비게이션바는 회색으로 수정 
  
  
• 언어
  구매 버튼을 클릭했을 때 나오는 Alert 에서, 동사를 사용하도록 수정 ( Cart => Buy )
  
  
• 크기 & 두께
  구매 버튼을 클릭했을 때 나오는 Alert 에서, Buy를 Bold로 수정
  
  
• 심볼 & 액세서리
  뒤로가기 꺽쇠와 체크 아이콘 수정
  
  
• 모양
  인터랙티브한 버튼의 모양을 네모로 통일 ( +-버튼을 네모로 수정 )
  인터랙티브하지 않은 것은 네모를 사용하지 않게 수정 ( 커피 이미지를 동그라미로 수정 )
  
  
• 접근성
  구매하기 버튼을 좌측 상단으로 옮김 ( 이거는 앱 성격마다 정답이 아닐 수 있음 )

 

 

내 앱에서 행동 유도성 테스트 하기.

1. 내 앱 안의 상호작용 가능한 컨트롤들 찾아보기
2. 상호작용을 전달하는 데 사용하는 속성 식별하기
3. 모든 인터렉티브 요소에 대한 스타일 가이드 정의하기
4. 스타일 가이드 만들기
5. 실수로 상호 작용을 전달할 수 있는 요소가 없는지 확인하기

 

 

 

사용성 2. 일관성 (Consistency)

---

• 여러 차를 렌트해서 운전할 때, 꽤 자연스럽게 운전이 가능하다
  여러 표시등 아이콘이 일관적이고, 브레이크와 가속기의 위치도 익숙하기 때문.
  이런 일관성은 사용성을 향상 시킨다
  
  
• iOS 라는 플랫폼 일관성
  다른 앱들과의 일관성이 중요하다
  당신의 고객은, iOS의 수많은 다른 앱들을 써본 유저일 확률이 높다

 

• iOS 에서의 아이콘 일관성

공유 아이콘	뒤로가기 아이콘	수정 아이콘
sharrow (o)	< (o)	Edit텍스트(o)
점3개를이은아이콘 (x)	<- (x)	점3개쌓은아이콘(x)

 

 

 

일관성 실습 챌린지

---

• 피콜로 메인화면 수정
  • 네비게이션 바의 타이틀과 장바구니 아이콘의 배치 수정
  • 페이지 컨트롤러에서, 선택된 페이지의 컨트롤러에 Fill 적용
  • 콜렉션 뷰 타이틀 수정

 

• 피콜로 커피 주문화면 수정
  • Back 버튼의 꺽쇠 수정 + 이전 화면의 title 추가
  • iOS 에서는 체크 박스를 사용하지 않음. 체크 박스 삭제
  • iOS 에서는 스태퍼를 많이 사용함. 갯수 증감을 스태퍼로 수정.

 

 

내적 일관성을 지켜야한다.

• 내적 일관성 지키기 => 응집성을 제공
• 앱의 여러화면이 마치 하나인 것처럼 느끼게 된다
• 응집성을 제공받은 유저는 제품이 무결하다고 느껴진다 ( 잘 정제된 제품이라고 느끼게 된다 )
• 휴먼 인터페이스 가이드의 색상 참고하기. 보색 등이 자세히 설명되어있다. 
• 색상에서 가장 중요한 것중 하나는 가독성.
  텍스트와 백그라운드의 명암비를 4.5 : 1 이상으로 하기 ( Xcode에서 확인할 수 있다! 와우! )

 

 

내 앱에서 일관성 테스트 하기

1. 자신의 스타일 가이드 확인해보기
2. 사용된 색상과 텍스트 스타일 세어보기
3. 하나의 요소가 다른곳에 사용되지 않았는지 확인하기
4. 상호 작용을 위한 색상은 무엇인지 확인하기
5. 스타일 가이드를 사용할 수 있는 부분 확인하기

 

 

사용성 3. 근접성 ( Proximity )

---

• 컨트롤이 개체에 가까워질 수록 근접성을 띄는 것
  다른 방들과 다르게 화장실만 왜 전구 스위치가 왜 화장실 밖에 있는가?
  그때 가장 필요하기 때문
  
  
  

사용성 4. 그룹핑 ( Grouping )

---

• 비슷한 기능을 비슷한 위치에 그룹핑 해야함
  역사가 가장 오래된 iOS 의 카메라 앱의 경우, 수많은 기능이 들어갈 때 마다 신중하게 배치함.
  좌측상단 기능들과, 우측상단 기능들, 중앙 하단 기능들 모두 각각 연관이 있는 기능들.

 

 

 

근접성, 그룹핑 실습 챌린지

---

• 가격 텍스트를 아래로 내림
  음.. 근접성, 그룹핑은 좀 부실한 감이 없지 않다.. 너무 당연해서 그런가~~

 

 

내 앱에서 근접성과 그룹핑 테스트 하기

1. 컨트롤 그룹들을 식별하기
   - 각 그룹의 컨트롤이 관련되어 있다고 느끼나?
   - 그룹화되지 않은 컨트롤이 다른 컨트롤에 관련되어 있지는 않은가?
2. 컨트롤의 모양이나 색, 배치 등을 움직여 더 명확하게 변경하기

+ 앱을 디자인할 때, 혼자 컴퓨터를 보며 꿍하지말고 스스로에게 질문을 던지면서 하라
   내가 어디있고 어떤걸 할 수 있고, 어떤 결과가 일어나지?! 등

 

 

 

드디어 피드백! ( Feedback )

---

유저에게 줄 수 있는 피드백들

• 상태 ( status )
  카메라 동영상 촬영중임을 알리기

 

• 완료 ( Completion ) 
  메일을 확인했다거나, 송금이 완료됐다거나 할 때 진동으로 알려주기
  
  
• 경고 ( Warning )
  앟 못들었다..
  
  
• 오류 ( Errors ) 
  아래처럼 빨갛게 유효성 체크 에러 표시

 

 

오류 피드백은 최대한 안보여주는 것이 좋다

• 유저가 날짜를 잘못 입력해서, 6월 31일을 입력했다면 오류를 보여주지말고 7월 1일을 보여줘라..!

 

 

어떤 피드백이 좋은 피드백인가?

• 내가 커피숍 알바를 하다가 실수를 했다. ( 재료를 바꿔버렸다! )
• 아래의 피드백 3개 중 단골 C의 피드백이 가장 좋다
  • 단골 손님 A : 오늘 커피맛이 이상하던데?
  • 동료 B : 사람들이 오늘 커피 맛이 전반적으로 이상하다고 하던데?
  • 동료 C : 커피 같이 만들어보자, 우유 컵은 체크해봤어?
    

 

좋은 피드백은

1. 명확해야하며 ( Clear )
2. 즉각적이고 ( Timely )
3. 상황에 맞게 ( Contextual )
4. 실행 가능해야한다 ( Actionable )

유저에게 주는 피드백도 마찬가지다~

 

 

 

피드백 챌린지!

---

• 회원가입시, 이미 있는 이메일을 사용할 때, 에러 Alert 만 띄우고 끝내지말고,
  어떤 계정인지 보여준다.
  그리고 로그인이나 비밀번호 찾기를 가능하게 한다
  
  
• 커피가 다 준비된 푸시알람의 문구는,
  너의 커피가 준비됐어! 보다는,
  커피 가져가세요! 가 더 직관적이다.

 

 

내 앱에서 피드백 테스트 하기

• 앱에서 오류(Errors) status 를 찾아보기
• 경고 (Warning) status 를 활용하여, 사용자가 그 상황에 처하는 것을 방지하기
• 완료 (Completion) 피드백을 줄 수 있는 곳은 없는지 확인하기
• 앱 내의 피드백이 아래에 맞게 설계되어 있는지 확인하기
  • 명확한지
  • 즉각적인지
  • 상황에 맞는지
  • 실행 가능한지

 

 

Q & A 

---

1. Q. 장바구니 아이콘에 카트가 왜 이상한가요!! 물건을 담는 다는 어포던스를 가지고 있잖아요!!
   A. 카트 아이콘도 맞긴하다. 무언가 대표하는 것을 글리프라고 한다. 카드도 해당 글리프를 가지고 있으니 맞긴하다
   다만 커피 주문이라는 앱의 아이덴티티를 보았을 때 컵홀더가 가능하고 더 적절하다고 본다
   
   
2. Q. 강의 다시 듣기는 안되나?
   A. 아쉽지만 다시 듣기 서비스를 제공하고 있지 않다. 모든 내용은 휴먼 가이드라인에 나온다.