아이패드 UI 디자인 가이드 (2/3)

출처 : http://monodream77.blog.me/130090397497

Reduce Full-Screen Transitions - 전체화면 전환은 피하라

 

컨 텐츠의 내용이 바뀔 때 시각적인 트랜지션을 밀접하게 적용하라. 정보의 일부분이 바뀔 때 때 전체 화면을 통째로 교체하는 대신에, 변경이 필요한 부분의 영역만 업데이트하도록 하라. 스크린 전체를 바꾸지 말고 각각의 뷰와 오브젝트를 트랜지션하는 것이 일반적인 규칙이다. 대부분의 경우에 전체 스크린을 뒤집는 방법은 추천하지 않는다.

 

 

 

 

Enable Collaboration and Connectedness - 협업과 공유를 가능하게 하라

 

사용자는 아이패드를 개인용 기기로 보지만, 아이패드는 다른 사람과 같이 협업하며 사용하기에 좋은 크기를 가지고 있다.

다 른 사람과 어플리케이션을 같이 사용하기를 원하는 경우를 생각해 보라. 하나의 기기를 같이 사용하고 데이터도 공유하는 것을 생각해 보라. 얘를들면, 두 사람이 서로 스크린의 반대편에서 게임을 할 수도 있다. 또는 밴드 어플리케이션에서는 다른 사람이 다른 악기를 하나의 기기에서 같이 연주를 할 수도 있다.

사용자는 자신에게 중요하다고 생각하는 정보를 공유하기를 원한다. 당신의 어플리케이션에서도 그렇다면, 위치나 의견, 또는 하이스코어 등을 사람들과 쉽게 공유할 수 있도록 만들어라. 

대 부분의 어플리케이션에서는 사람들이 어플리케이션 밖에서 그들이 사용하는 다른 도구와 데이터를 공유할 수 있도록 해 줌으로서 가치를 더한다. 예를 들면, 아이패드 어플리케이션은 컴퓨터 어플리케이션에서 모바일의 기능을 보충해주는 역할을 할 수 있다. 또는, 아이패드 어플리케이션은 아이폰의 같은 어플리케이션을 사용하는 유져와 연결할 수 있게 할수도 있다.

 

 

 

Add Physicality and Heightened Realism - 현실세계와 같이 디자인하라

 

가 능하면 항상 현실적이고 물리적인 모습으로 디자인 하라. 당신의 어플리케이션이 더욱 실제와 같이 보이고 동작할 수록, 사용자는 동작 방식에 대해 더욱 쉽게 이해할 것이고, 사용하기를 더욱 즐기게 될 것이다.  예를 들면, 사람들은  아래와 같이 실제와 같은 주소록을 보고 즉각적으로 어떻게 사용할지 알 수 있다.

 

Figure 3-6 주소록 화면은 사용자가 기대하는 대로 동작할 수 있도록 실제의 주소록처럼 디자인되어 있다. 

 
  

어 플리케이션을 실제와 같이 디자인 할 때, 세세하고 정확하게 디자인하려 애써야 한다고 생각하지는 말라. 때때로,  대상을 충실히 표현한 것 보다 상세하고 세련된 표현이 더욱 현실적이고 많은 의미를 담 고 있는 것 처럼 보이지만 사실은 그렇지 않다. (대상을 상세하고 세련된 표현하기보다 ‘충실히’ 표현하라.).  오브젝트나 화면을 디자인 할 때, 사용자와 커뮤니케이션 하고 어플리케이션의 본질을 표현할 수 있는 기회라고 생각하라.

더 욱 세련된 현실감을 위해 애니메이션을 사용하라. 일반적으로 어플리케이션의 모양보다 움직임에 정확성을 기하는 것이 더욱 중요하다. 사용자는 주로 형태에서 미적인 요소를 받아들이지만,  어플리케이션의 움직임이 물리적인 법칙을 지키지 않고 움직이는 것을 볼 때,  혼란을 느낄 수 있다.  가능하면 당신이 만든 가상의 모습과 동작이 표현하려고 한 현실의 모습과 동작과 동일하게 만들어라. 실제적인 에니메이션은 어플리케이션을 실제처럼 느끼고 시간을 보내고 싶은 물리적 공간으로써의 인상을 강화시켜 준다.

 

 

 

 

 Delight People with Stunning Graphics - 뛰어난 그래픽으로 사용자를 즐겁게 하라

 

고 해상도의 아이패드 스크린은 풍부하고 아름다운 그래픽을 지원하여 사용자를 어플리케이션 속으로 끌어들이면서  테스크를 쉽게 수행 하도록 해준다. 아이패드는 디자인된 어플리케이션의 아트웍을 있는 그대로 보여주기 때문에 당신은 사람들이 감탄할 만한 최고의 그래픽을 만들 수 있는 프로페셔널한 아티스트를 고용하도록 해야한다. 당신의 어플케이션의 가치를 높이는 한 가지 방법은 질이 좋고 귀중한 재료를 본떠서 표현하는 것이다. 예를 들면 나무, 가죽이나 금속 재질의 효과가 적당하다. 표현한 재질이 현실적이고 고급스럽게 보일 수 있도록 공을 들여라. 아래 그림처럼, 노트 어플리케이션은 고급 가죽과 세심한 스티치의 느낌으로 만들어 졌다.

 

Figure 3-7 현실적이고 고급스러운 재질이 노트의 느낌을 세련되게 표현하고 있다.

 
 
 

 

 

 

 

 Minimize Modality - 모달리티(사용자에게 결정을 요구하는 테스크)를 최소화 하라

 

가 능하면 사용자에게 결정이나 응답을 요구하는 상황을 최소화 하라. 아이패드 어플리케이션은 사용자가 비선형 방식으로 인터렉션하도록 해야한다. 판단을 요구하는 상황은 사용자의 워크플로우를 방해하고 특정 사용경로를 고르도록 유도함으로서 이러한 것을 방해한다.
판단을 요구하는 것은 아래와 같은 상황에서 적당하다.
 

 사용자의 주의를 요구하는 상황

사용자의 데이터를 모호한 상태로 두지 않기 위해 태스크가 완료되어야 할 때 (또는 명백히 포기되어야 할 때)

 

 

 

 

 

 Rethink Your Lists - 리스트를 사용할 때 고려해야 할 것

 

리 스트(표 형태)는 아이폰 어플리케이션에서 많은 정보를 효율적으로 보여줄 수 있는 일반적인 방법이다. 아이패드에서도 역시 리스트는 아주 유용하다. 그러나 같은 정보를 더욱 사용성이 좋은 방법으로 보여줄 수 있는 방법에 대해서 생각해 봐야 한다. 예를 들면 :

• 현실세계와 같은 모습을 생각해 보라. 예를 들면, 아이폰에서 주소록은 일련의 리스트이지만, 아이패드에서 주소록은 실제와 같이 세련된 주소록 책자의 모습을 하고 있다.

• 정 보의 일부를 리스트 아이템이 아닌 어떤 물체로 보여주는 것을 고려해 보라. 예를 들면, 아이판 어플리케이션에서는 앨범을 앨범 커버 썸네일의 그리드로 보여준다. 그리고 삭제한 메일이나 메시지는 실제의 종이뭉치처럼 보여준다. (Figure 2-4 참조)

• 다른 뷰에 포함시킴으로서 리스트의 폭을 제한하라. 예를 들면, 스크린에 꽉 차게 하는 대신, 팝오버 안에 보여준다거나 현재 뷰의 뒷면에 보여주는 것이 적당할 수도 있다.

• 가 능하면, 리스트 형태의 정보를 아이폰 어플리케이션과 똑같은 형식으로 보여주는 것을 피하라. 아이패드에서는 리스트는 훨씬 폭이 넓다. 그래서 아이폰에서 줄을 꽉 채우는 컨텐츠가 아이패드에서는 비어보일 수 있다. 여분의 공간을 각각의 라인에 해당하는 추가적인 정보나 상세 정보를 보여주는 방식으로 활용하라.

 

 

 

 

 

Consider Multifinger Gestures - 멀티핑거 제스쳐를 고려하라.

넓은 아이패드 스크린은 두 사람 이상이 수행하는 제스쳐를 포함해서 다양한 방식으로 정의할 수 있는 멀티핑거 제스쳐를 지원한다. 비록 복잡한 제스쳐가 모든 어플리케이션에서 필요하진 않지만, 게임이나 컨텐츠를 만드는 어플리케이션과 같이 오랜 시간을 사용하는 어플리케이션에서는 풍부한 경험을 제공할 수 있다. 표준이 아닌 제스쳐는 발견하도 쉽지 않고 적용한다고 해도 그 기능을 실행하는 유일한 방법이 되어서는 안된다는 것을  항상 생각하라. 사용하는 제스쳐의 방식이 어플리케이션의 기능, 사용자의 기대와 맥락이 통해야 한다는 것을 명심하라. 예를 들면, 사용자가 자주 사용하고 빨리 완료해야 하는 중요한 태스크를 수행해야 한다면, 기본 제스쳐만을 이용하게 해야한다. 그러나 특별한 용도의 현실과 같은 모습의 컨트롤을 포함하고 있거나, 사용자가 탐험하기를 기대하는 환경을 제공한다면, 사용자 정의나 멀티핑거 제스쳐가 적당할 수도 있다.  (더 많은 정보를 보려면 iPhone Human Interface Guidelines.의  “Support Gestures Appropriately” 를 확인하라)

 

 

 

 

 

Consider Popovers for Some Modal Tasks - 모달 테스크에서 팝오버를 사용할 때 고려할 것

사용자가 팝오버나 모달 뷰가 열려있는 상황에서 메인 뷰를 조작하지 못한다는 점에서 팝오버와 모달 뷰는 비슷하다. 그러나 팝오버가 두 가지 다른 방법으로 사용될수 있는 반면 모달 뷰는 언제나 모달 뷰 형태로만 사용된다. 

 

• 모달 팝오버(Modal popover) 팝오버가 주변의 영역을 어둡게 하는 경우이며 다른 테스크를 하기 위해서는 팝오버를 명백히 해지하는 것을 요구한다. 이 행위는 모달 뷰와 아주 비슷하지만 팝오버의 형태는 좀더 가벼운 경험을 제공한다.
  

• 넌모달 팝오버(Nonmodal popover) 팝 오버가 주변을 어둡게 하지 않는 경우이고 사용자는 해지하기 위해서 팝오버 밖의 영역을 탭할 수 있다.(팝오버를 나타나게 한 컨트롤을 포함해서) 이 행위는 넌모달 팝오버를 한 어플리케이션에서 분리된 상황이 아닌 다른 뷰처럼 보이게 한다.

 

 

  

 

게 다가 팝오버는 나타나게 하기 위해 눌려진 곳을 가리키는 화살표를 가지고 있다. 이 시각적 결합은 이 전의 동작을 기억하게 도와준다. 이것은 모달 팝오버를 어디서 나온 것인지 보여주지 않으며 스크린을 차지하는 모달 뷰보다 더욱 일시적인 것 처럼 보여준다.

 

• 다른 종류의 인풋을 하는 테스크를 해야 하는가? 그럼 팝오버를 사용하라.
  팝오버와 모달뷰 모두 키보드를 띄울 수 있어도, 팝오버가 선택지나 옵션 리스트를 보여주는데 더 낫다.

 

• 테스크가 정보구조로 깊이 이동하는 것을 요구하는가? 그럼 팝오버를 사용하라.

  팝오버의 프레임은 여러 페이지를 보여주는데 더욱 적합하도록 되어있다. 왜냐하면 사용자가 팝오버와 메인 뷰를 헛갈릴 가능성이 거의 없기 때문이다.
  

 

• 사용자가 테스크를 마치기 전에 메인 뷰를 보기를 원하는가? 그럼 넌모달 팝오버를 사용하라.
  왜냐하면 사용자가 넌모달 팝오버 주변의 메인 뷰를 볼 수 있고 메인뷰 영역을 누름으로서 해지할 수 있기 때문이다. 사용자가 팝오버의 테스크를 중지하고 바로  돌아올 수 있도록 해 주어야 한다.
  

 

• 테스크가 아주 상세하며 어플리케이션의 주요 기능을 하고 있고  있는가? 그럼 모달 뷰를 사용해야 할 것이다.
  

  모달 뷰에서는 사용 맥락이 크게 전환되기 때문에 사용자가 테스크를 끝낼때 까지 모달 뷰에 집중할 수 있게 해 준다. 모달 뷰 스타일의 큰 스크린 영역에서는 사용자가 많은 양의 정보를 입력하기 쉽다. 

  만 약 테스크가 어플리케이션의 기능의 중요한 부분을 수행하고 있지만 상세한 테스크가 아니라면, 모달 팝오버가 더 좋은 선택일 수도 있다. 왜냐하면 시각적으로 가벼운 팝오버가 자주 발생하는 테스크에서는 더 쾌적하게 느껴질 수 있기 때문이다.
  

 

• 테스크가 환경 설정 처럼 단지 한번 또는 아주 드물게 일어난다면, 모달 뷰를 사용하는 것을 고려하라.
  

  사용자는 단 한번 또는 아주 드물게 일어나는 테스크에서는 현재 상황에 머물러 있는 것을 크게 신경쓰지 않는다.

 

 

여러가지 용도로 팝오버를 사용할 수 있며, 주로 보조적인 도구로 많이 사용한다.(사용 가이드는 "Popover" 참조). 또한 아이패드 어플리케이션은 팝오버 안에 액션 시트를 보여줄수 있다는 것을 주의하라. ("Action Sheet" 참조) 모달 뷰를 사용하기로 결정했다면, 당신이 사용할 수 있는 다른 스타일들을 반드시 확인하라.("Modal View"에서 확인할 수 있다.) 당신의 어플리케이션에서 원하는 테스크에 가장 적합한 모달 테스크의 제시 스타일을 선택할 수 있을 것이다. 

 

 

 

 

 

 De-emphasize User Interface Controls - 컨트롤 UI를 돋보이지 않게 하라

 

UI 는 눈에 띄지 않는 프레임으로서 디자인을 하여 사용자가 관심을 가지는 Contents에 집중하도록 유도하라. UI의 개수를  최소화 하고 최대한 눈에 띄지 않게 함으로서 어플리케이션 컨트롤에 신경이 쓰이지 않도록 하라. 사진보기에서는 약간의 눈에 띄지 않는 컨트롤을 투명한 바에 배치 함으로서 그렇게 하고 있다.

어플리케이션의 그래픽 스타일과 미묘하게 차이가 나도록 디자인된 컨트롤을 생각해 보자. 이러한 방식으로 사용자가 컨트롤을 주의깊게 관찰하지 않더라도 눈에 띄게 할 수 있다.

또 한, 사용자가 컨트롤을 잠시 사용하지 않을 때 사라지고, 스크린을 터치하면 다시 나타나는 컨트롤을 생각해 보자. 때때로 당신은 당신의 어플리케이션에서 컨트롤들이 사라지기를 원할 것이다. 이 방법은 사용자가 보고싶은 스크린 영역을 추가로 확보해 준다. 예를들면, 사진보기는 사용자가 컨텐츠에 집중할 수 있도록 인터렉션이 없을 때 컨트롤과 바를 잠시동안 사라지게 한다.

 

 

 

 

 Restrict Complexity in Modal Tasks - 모달 테스크에서는 복잡한 테스크를 지양하라

 

사 용자는 모달 뷰에서 독립된 서브테스크를 할 수 있는 것에 대해 감사해 한다. 왜냐하면 맥락 전환이 명확하고 일시적이기 때문이다. 그러나 서브테스크가 아주 복잡하다면, 사용자는 모달 뷰에 들어오기 전에 중단한 메인 테스크의 상황을 잊어버릴 수 있다. 이러한 위험은 모달 뷰가 풀스크린이고 종속된 화면이나 상황을 많이 가지고 있을 때 증가한다.

모 달 테스크가 아주 짧게 하고 범위를 제한시켜라. 사용자가 모달뷰를 어플리케이션 속의 미니 어플리케이션처럼 사용하길 원하지 않을 것이다. 모달 뷰의 계층을 가지고 있는 모달 테스크를 만드는데 특별히 주의하라. 왜냐하면 사용자는 그들이 수행한 과정을 쉽게 잊어버리고 길을 잃어버릴 수 있기 때문이다. 모달 테스크가 서브뷰를 가져야 한다면, 순환구조를 피하고 한 가지의 명확한 경로를 제시하라. 모달 테스크에서 빠져나올 수 있는 항상 명확하고 안전한 경로를 제공하라. 사용자는 그들이 모달 뷰나 팝오버를 종료했을 때 맞게되는 상황을 예측할 수 있어야 한다. 테스크가 다수의 모달 뷰가 필요하다면, Done 버튼을 서브 뷰에 더하지 말라. 헛갈릴 수 있는 가능성이 있다.

 

 

 

  

 

 Downplay File-Handling Operations - 파일을 관리하는 작업은 제공하지 말라

 

아이패드 어플리케이션이 파일을 생성하고 복제할 수 있도록 하지만, 사용자가 아이패드에서 파일시스템에 대한 인식을 해야 한다는 것을 의미하진 않는다.

아 이패드에서는, Mac OS X 파인더와 유사한 어플리케이션이 없으며, 사용자는 컴퓨터에서 하던것 처럼 파일을 조작하기를 요청받아서는 안된다. 특별히, 사용자는 파일 타입이나 위치에 대해서 생각하게 하는 어떤 것과도 마주치면 안된다. 

 

• 파일 계층구조를 보여주는 열기나 저장 다이얼로그

• 파일의 접근제한을 보여주는 정보

 

 

대신, 문서를 다루는 아이패드 어플리케이션은 사용자가 그들의 컨텐츠를 어플리케이션의 한 오브젝트로 볼 수 있도록 해야한다.

만 약 당신의 아이패드 어플리케이션이 문서를 생성하고 편집할 수 있도록 해준다면,  문서를 열거나 새 문서를 생성하는 문서 선택기를 제공하는 것이 적당하다. Document picker같은 툴이 이상적이며 다음과 같은 사항을 제공해야 한다.

 

• 매우 그래피컬 해야한다. 사용자는 문서를 보여주는 화면에서 시각적인 상징으로 찾고자 하는 문서를 쉽게 인식할 수 있어야 한다.

• 사용자가 원하는 것을 하기 위한 제스쳐를 최소화 한다. 예를들면, 사용자는 존재하는 문서들을 스크롤하고 원하는 것을 탭하여 열 것이다.

• 새로운 문서 만드는 기능을 포함해야 한다. 새 문서를 만들기 위해 다른 곳에 가도록 하지 말고, 사용자가 새 문서를 만들기 위해 아이콘을 탭할 수 있게 해주어야 한다.

 

 

 

 

 

 Ask People to Save Only When Necessary - 필요할 때 저장할 것을 물어보라

 

사 용자는 작업을 확실히 취소하거나 삭제하지 않는한 데이터가 항상 보존되기를 원한다. 사용자가 문서를 만들고 편집할 수 있도록 하는 어플리케이션에서는, 사용자가 의도적으로 저장을 할 필요가 없도록 만들어라. 아이패드 어플리케이션은 주기적으로, 그리고 다른 문서를 열거나 어플리케이션을 종료했을 때 사용자의 입력을 저장해야 할 책임이 있다.

어 플리케이션의 주요 기능이 컨텐츠를 만드는 것이 아니라면, 사용자가 보기 모드와 편집 모드를 바꿀 수 있도록 해주어야 한다. 이때에도 변경사항을 저장할 것인지 묻는 것이 좋다. 이런 경우에서는 편집 버튼을 제공하면 좋다. 편집 버튼을 누르면, 그 버튼은 저장 버튼으로 바뀌고 취소 버튼을 추가할 수 있다. 편집 버튼의 저장 버튼으로의 전환은 사용자가 편집 모드에 있다는 것을 상기시켜 주고, 취소 버튼은 변경사항을 저장하지 않고 빠져나갈 수 있는 기회를 제공한다.

일반적으로, 사용자가 팝오버에 넣는 정보는 저장하라.(그 작업을 취소할지라도), 왜냐하면 사용자는 의도하지 않더라도 팝오버를 꺼버리기 쉽기 때문이다. 팝오버에 대한 사용 가이드는 "Popover"를 참조하라.

 

 

 

 

 

Start Instantly - 즉시 시작하라

 

아이패드 어플리케이션은 사용자가 지연 없이 사용할 수 있도록 가능한한 빨리 시작해야한다. 어플리케이션을 시작할 때, 아이패드 어플리케이션은 다음과 같은 사항을 수행해야 한다.

 

• 현재 방향에서의 어플리케이션 첫 화면과 닮은 실행 이미지를 보여준다.  어플리케이션이 실행되까지 인식되는 시간을 줄여주며 디바이스가 동작중인 것을 확인시켜 준다. (더 많은 정보를 위해서는 "Create a Launch Image for Each Orientation. "를 확인하라)

  

• 어플리케이션의 시작을 느리게 하는 어플리케이션 정보 화면이나 스플래시 스크린을을 지양하라. 당신의 브랜드의 정보를 보여주는 것이 금지되어 있지는 않지만, 어플리케이션을 실행시킬 때마다 매번 사용자가 그 정보를 본다는 것을 알아야 한다. 스플래시 스크린을 보여주어야 한다고 생각한다면, 너무 오래 보여주어서는 안되고, 어떤 조작 없이 사라지게 해야 한다는 것을 명심하라. 그러면 어플리케이션을 빠르고 쾌적하게 시작하게 할 수 있을 것이다.

 

• 어플리케이션이 마지막으로 종료되었던 상태로 실행시켜라. 사용자가 어플리케이션을 마지막으로 사용할 때의 상태로 가기 위한 단계를 다시 기억해야할 필요는 없다. 

 

• 사용자가 환경설정을 하도록 하지 말라. 대신, 당신이 하라.

• 80퍼센트의 사용자의 즈에 어플리케이션을 맞춰라. 그러면, 대부분의 사용자는 환경설정을 하지 않아도 된다. 어플리케이션이 이미 그들이 기대하는 대로 동작하도록 설정되어 있기 때문이다. 만약 소수의 사용자에게만 필요하거나 대부분의 사용자가 단 한번만 사용하는 기능이 있다면 그냥 포기하라.

• 시스템으로부터 가능하면 많은 정보를 얻어라. 기본 어플리케이션이나 디바이스 환경설정의 정보를 사용할 수 있다면, 시스템에서 그 값을 가져오라. 사용자가 그것을 다시 설정하게 만들지 말라.

• 사용자의 입력을 요구하기 전에 사용자가 어플리케이션으로부터 이득을 얻게 하라. 어플리케이션의 모든 기능을 사용할 수 있게 하기 전에 사용자로부터 정보를 얻어야 한다면, 사용자의 입력이 필요하지 않은 것을 먼저 수행할 수 있도록 해라. 나중에 필요한 경우에 사용자 정보를 요구하라. 그리고 다시 묻지 않기 위해 바로 저장하라.

 

 

 

Always Be Prepared to Stop - 항상 멈출 준비를 하라

 

아 이폰 어플리케이션처럼, 아이패드 어플리케이션은 다른 어플리케이션을 실행하기 위해 홈 버튼을 누르면 어플리케이션이 중지된다. 중지시키는 상황에 대해 좋은 경험을 제공하려면, 아이패드 어플리케이션은 다음과 같은 사항을 수행해야 한다.

 

• 사용자의 데이터를 가능한한 바로, 자주 저장하라.  왜냐하면 종료되는 상황이 어느 때고 나타날 수 있기 때문이다. 자주 저장을 할 때, 어플리케이션은 더욱 빨리 종료될 수 있고 사용자는 저장 버튼을 누를 필요가 없다. (“Ask People to Save Only When Necessary”를 확인하라.)

• 종료할 때 현재 상태를 가능한한 상세한 사항까지 저장하라. 사용자는 어플리케이션을 다시 시작할 때 바로 전에 사용했던 상황으로 돌아가기를 기대한다. 분리된 뷰를 사용하고 있었다면, 메인 뷰에서 선택되어 있던 것을 기억하고 어플리케이션을 다시 시작했을 때 그것을 보여주라.