Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iOS Human Interface Guidlines #5_SYS4U

  • Login to see the comments

iOS Human Interface Guidlines #5_SYS4U

  1. 1. iOS Human Interface Guidelines 번역자 : 시스포유아이앤씨 마영희 주임 작성일 : 2013년 4월 19일V. 사용자 경험 가이드라인iOS 장치의 사용자 경험은 사람들에게 도움을 주는 컨텐츠의 상호작용을 간략히 다룬다. 이 장의가이드라인은 iOS장치에서 동작하는 모든 어플리케이션에 해당된다.1. 주요작업에 초점을 맞춰라.iOS 어플리케이션을 설치하고 주요 작업에 초점을 유지하는 경우에 만족하고 사용할 수 있다. 당신의 어플리케이션 정의 문을 사용하면 주요작업에 집중하는데 도움을 받을 수 있다. (좀 더 많은정보는 “Create an App Definition Statement”를 통해 얻을 수 있다.) 초점을 유지하기 위해서는내용과 화면 중에 어떤 것이 더 중요한지를 결정 해야 한다.각각의 화면에 무엇이 필요한가 분석한다. 각 화면을 구성을 결정할 때 항상 자문해 봐야 한다.사람들이 정보와 기능 중에 지금 당장 필요한 것은 무엇인가? 만약 당신의 대답이 ‘NO’ 라면 내용에서 중요한 것이 정보 인지 기능인지 결정해야 한다. 예를 들면, iPhone의 달력 어플리케이션은 날짜와 발생되는 이벤트에 초점을 맞추고 있다. 사용자들은 현재날짜를 강조하여 보기 위해명확한 버튼을 사용할 수 있고, 옵션을 선택할 수 있으며, 이벤트를 추가 할 수 있다.
  2. 2. 2. 사람들이 걱정하는 내용들을 향상 시켜라.게임 내 에서는 사람들이 걱정하는 경험이 있다. 그것은 예상치 못했던 운영이나 소비, 컨텐츠의생산 등 이다. 만약 당신이 게임을 개발 한다면 당신은 충분한 스토리, 멋진 그래픽, 그리고 동적인 게임방식의 경험을 강화해서 게임을 발전시킬 것이다. 당신이 게임을 개발하지 않을 경우, 사람들이 관심 가지는 정보를 섬세한 프레임으로 UI를 디자인하여 사람들이 콘텐츠에 집중하게 할수 있다. 여기에 당신이 할 수 있는 몇 가지 방법이 있다.UI의 부담을 줄이기 위해 눈에 띄는 컨트롤 과 그 개수를 최소화 한다. 사진은 반 투명 바에 눈에 잘 띄지 않는 컨트롤을 배치하여 작업 한다.당신의 어플리케이션의 그래픽 스타일을 통합하기 위해서 섬세한 최적화 컨트롤을 고려해야 한다.이 방법은 컨트롤이 눈에 띄지 않아도 발견되고 이해될 수 있다.사람들이 컨트롤을 잠시 사용하지 않았을 때 컨트롤이 사라지는 것과 사람들이 스크린을 두드렸
  3. 3. 을 때 다시 화면에 표시 되는 것을 고려해라. 때로는 당신도 어플리케이션 UI가 보이지 않기를원할지도 모른다. 이것은 사람들이 보고 싶어하는 화면을 더 제공하기 때문에 몰입형 경험을 가능하게 하는 어플리케이션에서 특히 적합하다. 예를 들면 사진의 컨트롤과 바가 몇 분 동안 동작이 없으면 사라지고 사람들이 사진 그 자체에만 몰입할 수 있게 하는 것이다. 사람들이 작업하길원할 때 가볍게 두드리기만 하면 언제든지 컨트롤은 다시 표시 된다.3. 상.하를 생각하라.사람들은 아래와 같은 사항을 따르는 경향이 있기 때문에 화면에서 상단영역은 사람들에게 가장눈에 잘 띈다.  잘 사용하지 않는 손과 잘 사용하는 손의 손가락으로 제스처  한 손일 때 같은 손의 엄지로 제스처 한다.  그 들의 손 사이 두 엄지 손가락으로 제스처자주 사용되는 정보는 상단 근처 눈에 잘 띄고 접근하기 쉬운 곳에 배치 한다. 사용자는 화면을위에서 아래로 보기 때문에, 정보는 일반적인 것에서 특별한 것으로 높은 수준에서 낮은 수준으로 배치한다. 게임을 예로 들면, 가장 중요한 정보는 상단에 배치 된 것을 확인 할 수 있다. 부가적인 정보는 화면 하단에 배치되어있고 사용자들은 컨트롤을 사용할 수 있다.4. 사람들이 논리적인 경로를 따르게 하라.사람들은 어플리케이션이 올바른 경로를 가고 있는 것을 알게 되면 만족 하게 된다.사용자들이 예측하기 쉽고 논리적인 정보를 통해 경로를 만들어라. 또한 표시를 제공 해야 한다.사람들이 이전단계로 돌아가기 위한 뒤로 가기 버튼을 예로 들 수 있다.대부분의 경우 사용자에게 화면에 하나의 경로만 주어진다. 만약 한 화면에서 각각 다른 상황으로 접속이 필요할 경우, 다른 내용을 나타나게 할 수 있는 modal 뷰 사용을 고려해야 한다.
  4. 4. 5. 사용법은 간단하고 명료하게 만든다.그것을 작업에 사용하기 위해 얼마나 많은 시간을 소비하는지 알 수 없기 때문에 당신의 어플리케이션을 사람들이 즉시 이해할 수 있게 만들어야 한다.어플리케이션의 주요기능을 즉시 볼 수 있게 만들어라.  사람들의 의해 선택된 컨트롤 수를 최소화  사람들이 예상한 대로 컨트롤과 제스처가 적절하게 사용  사람들이 그들이 무엇을 하는지 정확히 이해하게 명확하게 라벨링 해야 한다.내장된 어플리케이션의 사용방법과 일치 해야 된다. 사용자가 화면의 계층 구조를 탐색하는 방법을 이해하려면 목록의 내용을 편집하고 탭 바를 사용하여 어플리케이션의 모드를 바꾸면 된다.그것들의 경험을 강화하여 사람들이 당신의 어플리케이션을 사용하기 쉽게 만든다. 예를 들면, 사람들은 도구 상자에 파란색으로 표시된 버튼이 현재의 내용이 표시된 것이라고 이해 할 것이다.만약 어플리케이션에서 하나의 내용에 여러 개의 파란색 버튼이 표시된 다면 사용자들은, 한번눌렀을 때 이렇게 표시된다고 이해할 것이다. 내장된 스톱워치 어플리케이션에서 정지 버튼과 시작버튼 그리고 기록이 캡쳐 된 버튼을 한눈에 볼 수 있다.
  5. 5. 6. 사용자 중심의 용어를 사용하라.사용자와 모든 텍스트 기반의 커뮤니케이션은 그들이 이해하는 용어를 사용하고 있다. 당신이 사용하고자 하는 단어 나 문구가 적합한 지 여부를 판단하려면 사용자가 알고 있는 것을 사용해야한다. 예를 들면, 전문 기술 용어는 초보 사용자에게는 그리 유용하지 않지만, 고급 사용자들에게는 유용할 수 있다. Wi-Fi 네트워크 설정 화면은 iOS 사용자의 취향에 맞게 어떻게 반응 하는지를설명하기 위해 평이한 단어를 사용하고 있다.날짜는 정확하게 작성 해야 한다. UI에 날짜 정보가 표시될 때 “오늘” 이나 “내일” 같은 친숙한 용어를 사용하는 것이 좋다. 그러나 사용자의 현재의 장소를 고려하지 않는다면 혼란을 줄 수 있다.자정 직전에 시작하는 이벤트를 예로 들어 보겠다. 같은 시간대의 사용자에게 이벤트가 오늘 시작되지만 초반 사용자에게 동일한 이벤트가 어제 시작했을 수 있다.7. 사용자의 입력을 위한 노력을 최소화 하라.사람들이 컨트롤을 누르거나 키보드를 사용해 정보를 입력하는 것은 시간과 주의가 필요하다. 만약 어플리케이션으로 작업을 하는데 많은 입력이 필요하다면 입력이 느린 사람들은 당신의 어플리케이션을 사용하는데 어려움을 느낄 수 있다.사용자의 입력을 위한 요구와 당신이 사용자에게 주는 답은 균형을 이루어야 한다. 즉, 사람들에게 가능한 한 많은 정보와 기능을 제공하기 위해 노력해야 한다. 그러면 사람들은 당신이 어플리케이션이 지체되지 않고 진행되고 있다는 것을 느끼게 된다.사용자가 쉽게 선택할 수 있도록 만든다. 예를 들면 사람들이 단어 형태보다 목록에서 항목을 선택하는 것이 더 쉽기 때문에, 텍스트 필드 대신에 테이블 뷰 또는 Picker를 선택할 수 있다. (이것에 대해서는“Table View” 와 “Picker”의 내용을 참조 하면 된다.)
  6. 6. iOS에서 정보를 얻어라. 사람들은 장치에 많은 수의 정보를 보관한다. 이것을 알면 당신은 연락처나 달력 정보 등을 쉽게 찾기 위해 사람들에게 정보를 제공할 필요가 없다.8. 파일 처리작업을 무시해라.iOS의 어플리케이션은 사람들이 파일을 만들고 조작 할 수 있도록 할 수 있지만, 이것이 사람들이 iOS 장치의 파일 시스템을 인식하고 해야 하는 것은 아니다.iOS어플리케이션과 OS X finder는 유사한 것이 아니다. 그리고 그것이 컴퓨터에서처럼 파일과 상호작용하는 것을 요구해서는 안 된다. 특히 파일의 메타데이터나 장소 등에 관해 사람들이 알아서는 안 된다. 가령,  파일의 단계가 노출된 다이얼로그의 열기 또는 저장  파일의 허용 상태에 관한 정보가능한 한 많은 사람들이 자신의 iTunes를 열지 않고 자신의 문서를 관리할 수 있다. 사용자가자신의 모든 장치에서 자신의 콘텐츠에 액세스하기 위해서 iCloud를 사용 하면 된다. 당신의 어플리케이션에서 더 많은 iCloud 경험을 제공하는 방법에 대한 몇 가지 팁은, "iCloud에"를 참조하면된다. 사람들이 어플리케이션으로 문서를 작성하고 편집 할 때, 기존 문서를 열거 나 새로 만들수 있는 문서 선택기의 일종을 제공하는 것이 적절하다. 가령 document picker 같은 것이다.  그래픽이 좋아야 한다. 사람들이 화면에 표시된 문서를 보고 그들이 원하는 문서를 명확 히 볼 수 있어야 한다.  사람들이 가능한 적은 수의 제스처로 그들이 원하는 것을 할 수 있어야 한다. 예를 들면, 사람들은 현재의 문서를 회전하는 것 만으로 가로 스크롤 할 수 있고 한번 두드리는 것 만으로 원하는 것을 열 수 있다.  새로운 문서의 기능을 포함해야 한다. 사람들이 새로운 문서를 만들기 위해 어딘가로 이 동하는 대신에 document picker의 이미지를 누르기만 하면 된다.어플리케이션을 열수 없는 경우에도 당신은 사람들이 당신의 어플리케이션 내에서 문서를 미리볼 수 있도록 미리 보기 기능을 사용할 수 있다. 이것에 대해서는 “Quick Look Document Preview”내용을 참조하면 된다.
  7. 7. 9. 협업과 연결의 활성화.iOS 장치는 개인 장치이지만, 다른 사람과의 협업과 공유를 촉진한다. 타인과 협력하여 연결 지원함으로써 당신의 어플리케이션을 강화한다.사람들이 다른 사람과 그들이 선호하는 장소, 의견 등을 공유하기 쉽게 만든다. 사람들은 일반적으로 그들에게 중요한 정보를 공유 하는 것을 기대하고 있다. 대부분의 어플리케이션은 도구를사용하여 다른 어플리케이션으로 데이터를 공유할 수 있다. 예를 들면 iOS 어플리케이션은 컴퓨터 애플리케이션에서 모바일 보완 역할을 할 수 있다. 또는 iPad 어플리케이션 사용자가 iPhone버전의 어플리케이션 사용자와 통신할 수 있다. 사람들이 소셜 미디어에 접속 할 경우 같은 장치에서 중복 서명을 피하기 위해서 Social framework APIs를 이용해야만 한다.iPad 같은 장치에서 당신의 어플리케이션을 여러 사람이 사용하는 것을 생각해 봐야한다. 예를들면 두 사람이 화면의 보드 양쪽에서 게임을 할 수 있을지도 모른다. 또는 밴드 어플리케이션을통해 하나의 장치에서 서로 다른 악기를 연주 할 수 있을지도 모른다.10. 설정의 중요성을 줄인다.할 수 있다면 어플리케이션 안에 설정을 포함시키는 것을 피하라. 설정에는 우선 어플리케이션동작과 사람들이 드물게 변경하는 정보들이 포함되어 있다. 사용자는 당신에 어플리케이션에 변환 없이는 설정을 열수 없다. 그리고 당신은 이렇게 행동하길 원치 않는다.당신의 어플리케이션의 기능이 사용자의 기대를 대부분 충족시켰을 때 설정을 줄어든다. 당신이사용자에 대한 정보가 필요한 경우, 답을 제공하기 위해 사용자에게 묻는 대신에 시스템으로 질문을 할 수 있다. iOS 어플리케이션에서 설정을 제공해야만 하는 경우 “The Settings Bundle” 에있는 iOS App Programming Guide 를 참조 하면 된다.사용자가 어플리케이션의 구성 옵션을 사용하여 그들이 원하는 동작을 설정하게 하자. 사람들이당신의 어플리케이션을 설정할 때 종료할 필요가 없기 때문에 설정 옵션은 당신의 어플리케이션의 변화에 동적으로 반응 할 수 있다.화면의 뒷면에 있는 어플리케이션 메인 UI에 어플리케이션 설정 옵션을 제공 해야 한다. 타당한위치를 정하기 위해 사람들이 얼마나 자주 설정을 사용하는지를 알아야 한다.  메인 UI에서는 중요한 기능 또는 사람들이 자주 사용하는 기능을 배치해야 한다. 예를 들면 iPad의 달력에서는 사람들이 그들의 하루, 한 주, 한 달의 일정을 볼 수 있다. 사람 들이 자주 일정을 변경하거나 중요한 기능이 달력의 관점마다 다르기 때문에 이 설정 옵 션을 메인 UI에 제공된다. 몰입형 경험을 제공하는 게임 어플리케이션은 사용자들이 익
  8. 8. 숙한 외관으로 바꾸려는 경향 때문에 어플리케이션 내부에 설정 옵션을 제공한다.  iPhone 어플리케이션에서는 사람들이 자주 변경하지 않는 옵션은 화면 뒤편에 배치할 수 있다. 예를 들면, 날씨의 주요기능은 도시의 현재 상황과 일주일 예보를 표시 하는 것이 다. 비록 날씨 화면에서 온도를 섭씨나 화씨 온도로 표시하는 것을 선택하는 것이 중요 할 수 있지만, 사람들은 이것을 자주 바꾸는 것을 선호 하지는 않는다. 그러므로 의미에 맞고 편리하게 이용 가능하게 배치 하되, 너무 뛰는 것은 좋지 않다.11. 적합한 브랜드세련되고 주제에 벗어나지 않는 방법으로 브랜드의 컬러나 이미지를 구체화 하라. 브랜드화는 그것이 아직 구체화 되지 않았을 때 효과적이다. 사람들은 작업을 끝내거나 재미를 느끼기 위해 당신의 어플리케이션을 사용한다. 사람들은 광고 보는 것을 강요당하는 것을 좋아하지 않는다. 최상의 사용자 경험은 조용히 당신의 정체성을 사용자에게 상기시키는 것이다.
  9. 9. 사람들이 신경 쓰는 컨텐츠가 공간을 차지하는 것을 자제하라. 예를 들면, 화면상단의 영구적으로위치해 있는 바는 아무것도 하지는 않지만 브랜드를 의미하는 것으로 컨텐츠의 작은 공간을 차지하고 있다. 브랜드를 보급을 높이기 위해 주제를 넘지 않는 방법을 생각해 봐야 한다. 화면 배경을 세밀하게 최적화하는 것을 예로 들 수 있다.중요: 당신의 브랜드를 전적으로 나타내고 있는 당신의 어플리케이션 아이콘은 이 가이드라인에서는 예외로 본다. 왜냐하면, 어플리케이션의 아이콘은 사람들이 자주 보며, 사람들이 브랜드를 눈으로 인식하는데 중요하기 때문이다.12. 빠르고 가치 있는 검색을 만들어야 한다.어플리케이션에서 검색의 주된 기능은 많은 양의 데이터를 처리하고 표시하는 것이다. 어플리케이션에서 검색할 경우 다음 가이드라인을 따르면 수월하다.항상 검색을 위해 데이터의 지표를 만들어야 한다. 당신의 어플리케이션 검색 경험에 부정적인첫인상을 만들 필요가 없기 때문에 사용자들이 검색을 시작할 때까지 기다리게 하면 안 된다.Live-filter 데이터로 빠르게 결과를 볼 수 있다. 가장 좋은 방법은 사용자가 타이핑하자마자 필터링을 시작 하는 것이고 그들이 타이핑을 계속하는 만큼 결과가 좁혀지는 것이다. Live-filtering 데이터가 상위의 사용자 경험이라 할지라도 그것이 항상 실용적인 것은 아니다. Live-filtering이 실행불가 할 때 사용자가 검색버튼을 누르는 것으로 검색을 실행할 수 있다. 이 작업을 수행 할 경우,사용자 프로세스가 정지되지 않았음을 알 수 있도록 검색의 진행 상황에 대한 피드백을 제공해야한다.가능하면 사용자가 타이핑 하는 동안 원격으로 데이터를 필터링 해야 한다. 사용자 입력을 필터링 하면 더 나은 검색 경험을 가져올 수 있지만 그들에게 응답 시간이 1 ~ 2 초 이상 된다면 그것을 알려주고 나갈 수 있는 기회를 주어야 한다.목록에서 목록 또는 색인 위에 검색 바를 표시해야 한다. 사용자들은 다른 전화번호부나 다른 어플리케이션의 검색 바에 익숙하기 때문에 검색 바가 이 위치에 있기를 기대한다. 이 위치에 검색창을 두는 것은, 그것은 그들이 목록을 스크롤 하거나 인덱스를 사용하는 경우 사용자의 방해가되지 않게 남아 있지만, 필요할 때 편리하게 이용 가능하게 하기 위함이다.특별한 경우에만 검색을 위해 탭을 사용하라. 당신의 어플리케이션에서 검색이 주요기능일 경우별개의 모드에 기능을 사용하길 원할 것이다. iTunes의 경우 음악을 찾거나 얻는 podcasts에 초점이 맞추어져 있다. 사용자들은 검색 탭에서 그들이 원하는 음악, 아티스트 등을 쉽고 편하게 찾을
  10. 10. 수 있다.필요하다면 컨텐츠를 즉시 표시하고 부분적으로 이용 가능하게 해야 한다. 이 방법으로 사용자들에게 유용한 정보를 즉시 전할 수 있다. iTunes를 예를 들면 검색버튼을 누르는 것으로 사용자들은 검색을 시작할 수 있다. 만약 네트워크가 느릴 경우 iTunes화면에서는 회전하는 표시와 로딩메시지가 동시에 표시되어서 사용자들이 검색이 진행됨을 알 수 있다. 그리고 나서 iTunes에는각각의 구역마다 제목이나 장르 같은 결과가 표시된다. 그리고 박스형태로 윤곽이 나타난다.만약 별개의 카테고리에서 데이터를 분류해야 한다면 scope bar 제공을 고려 해야 한다, scopebar 는 사용자가 검색에서 장소 나 규칙을 지정하거나 특정 기준에 따라 개체를 필터링 할 수 있다. 그것은 각각의 범주를 나타내는 4가지의 버튼을 포함하고 있다. 메일에서는 사용자에게 검색한 것들에 집중할 수 있게 주제 영역의 메시지나 모든 영역을 확장할 수 있는 scope bar를 제공한다. 제공되는 scope bar 는 사용자가 검색에 집중할 수 있게 도와주고, 결과의 양을 줄일 수 있다. 더 많은 정보를 얻기 위해서는 “Scope Bar.”를 참조하면 된다.13. 잘 쓰여진 설명으로 마음을 사로잡아라.당신의 어플리케이션 스토어의 설명은 잠재적인 고객과 커뮤니케이션 하기에 좋은 기회이다. 다음 지침을 따른다면 어플리케이션을 정확히 설명하고 특성을 더 강조하여 사람들을 만족스럽게할 것이다.정확한 철자법과 문법을 사용하라. 이러한 실수를 모든 사람이 실수를 하지 않겠지만 몇몇 사람은 이로 인해 어플리케이션에 부정적인 인상을 받을 수 있다.대문자는 작게 사용하라. 모든 대문자의 경우 사람들의 주목을 끌 수는 있겠지만 모든 문자를 대문자로 사용할 경우 읽기에 불편하다.특별한 버그 수정 사항은 설명을 제공하라. 당신의 어플리케이션 새로운 버전에 고객이 기다리는버그 수정이 된 경우 설명에 그것을 언급하는 것이 좋다.14. 간결하게 하라.신문 편집자처럼 여겨지게 헤드라인 형식으로 압축해서 정보를 전달하도록 노력 해야 한다. UI 텍스트를 사용할 때 짧고 직관적으로 사용하여 사용자가 빠르고 쉽게 받아들이게 해야 한다. 가장중요한 정보를 식별하고, 그것을 간결하게 표현하고 사람들이 그들이 찾고자 하는 것이나 다음으로 넘어가는 것을 이해하기 위해 너무 많은 글을 읽지 않도록 확실하게 나타내야 한다.사람들은 한눈에 그들이 무엇을 말할 수 있도록 컨트롤 짧은 레이블을 붙이거나 잘 이해되는 기
  11. 11. 호를 사용하라.15. UI요소를 일관적으로 사용하라.사람들은 다른 어플리케이션에서 일관적으로 사용하고 보기 위해 표준화된 화면과 컨트롤을 바란다.표준사용자 인터페이스 요소를 사용하는 것을 추천한다. 이 방법으로 사용자들은 그들이 당신의어플리케이션을 익히는데 도움을 받을 수 있다. 또한 iOS의 표준화면이나 컨트롤의 모습이나 행동이 바뀔 경우 쉽게 작업을 할 수 있다.게임 같은 몰입형 작업의 어플리케이션은 사용자 지정 컨트롤을 만드는 것이 좋다.표준작업을 수행하는 컨트롤은 근본적인 변화를 피할 수 있다. 만약 사람들이 익숙하지 않은 컨트롤 사용할 때 표준컨트롤이 아닐 경우 사람들은 그것이 익숙해 지기 위해 시간이 필요하다.iOS에서는 많은 표준 버튼과 내장어플리케이션에 사용된 아이콘이 사용 가능하다. 예를 들면,iPhone와 iPad 모두에서 같은 Refresh, Organize, Trash, Reply, 아이콘을 사용할 수 있다.사람들에게 혼란을 주지 않기 위해 표준 버튼과 아이콘을 사용하는 것은 아니다. 표준 버튼과 아이콘의 외형이 아닌 문서화된 의미로 판단해야 한다. 이것에 대해 자세한 사항은“SystemProvidedButtons and Icons.” 를 참조하면 된다.사용자의 경험을 활용하는 장점 이외에, 시스템이 제공하는 버튼과 아이콘을 사용하면 2가지의상당한 장점이 있다.  표준기능을 설명하기 위해서 사용자 정의 화면을 만들 필요가 없기 때문에 개발 시간 이 감소한다.  미래의 iOS는 표준 아이콘의 외형이 변화 함에도 사용자 안전성이 보장되도록 업데 이트 될 것이다. 다른 말로 하면 외형이 변해도 표준아이콘의 본래의 의미는 그대로
  12. 12. 남아있게 될 것이다.Xcode에서 Interface Builder 편집기는 그것이 쉽게 시스템 제공 버튼을 사용하여 컨트롤시스템이 제공하는 아이콘을 적용 할 수 있다. 이와 관련된 정보는 “Edit User Interfaces”를 참조 하면 된다.시스템이 제공하는 단추와 응용 프로그램의 특정 기능을 위한 적절한 의미를 갖는 아이콘이 없을 경우 사용자 정의 버튼이나 아이콘을 만들어야 한다. 이와 관련된 정보는 “Iconsfor Navigation Bars, Toolbars, and Tab Bars.”를 참조 하면 된다

×