Modal Contexts

UI Design Basics 2015.04.30 11:34

모달 컨텍스트

양식—즉,어떤것이 존재하거나 장점이나 단점을 경험하는 모드입니다. 혼동 없이 사용자가 업무를 수행하거나 정보를 얻을 수 있는 기회를 주지만 앱의 나머지 부분과 상호작용하는것을 일시적으로 막아서 작동하는 것입니다.

image: ../Art/modal_intro_2x.png

이상적으로, 사람들은 결과를 예측할 수 없는 방식으로 iOS앱과 상호작용할 수 있기때문에, 사용자가 앱에서 많은 모달경험을 최소화 하는것이최선입니다. 일반적으로, 이러한 상황에서만 모달 컨텍스트를 만드는 것이 좋습니다:

  • - 사용자의 주의를 끄는 것이 중요합니다.

  • - 모호한 상태에서 사용자의 데이터를 떠나지 않게 하기 위해 독립적인 작업이 완성되어야만 하거나 명쾌하   게 포기되어야만 합니다.

모달업무를 간단하고, 짧고 초점을 좁게 맞추세요 . 당신은 당신의 사용자가 앱 내의 미니 앱으로써 모달뷰를 경험험하는 것을 원하지 않을 것입니다. 하위작업이 너무 복잡하면 사람들은 그들이 모달 컨텍스트에 들어갔을때 예상했던 주업무를 보는 시선이 분산될 수도 있습니다. 사용자들이 방향을 잃고 단계를 어떻게 되짚어가는지 잊을 수있기 때문에 특히 뷰의 계층을 포함하는 모달작업의 생성을 특희 주의하세요. 모달작업이 별도의 뷰에서 하위작업을 포함해야 한다면 하나의 명확한 경로를 제공하고 순환을 방지해야 합니다. 모달뷰에 관한 가이드라인을 자세히 보고싶다면  Modal View.

항상 모달업무를 종료하는 명백하고 안전한 방법을 제공하세요. 사용자들은 그들이 모달뷰를 해제 할 때 그들 업무의 운명을 예견할 수 있어야합니다.

작업이 모달뷰의 계층구조를 필요로 한다면, 가장 높은 레벨 밑의 뷰에서 완료버튼을 누른다면 어떤일이 일어나는지 당신의 사용자를 확실하게 이해시키세요. 하위레벨 뷰에서 완료버튼으로 뷰 내 업무의 부분을 완성해야만 하는지 작업의 전체부분을 완료 하는지 결정하는 작업를 조사하세요. 잠재적인 혼동때문에 가능한 한 하위레벨 뷰에 완료버튼을 추가하지 마세요.

중요하고 이상적이게 활동할 수 있는 정보를 전달하는 알람을 예약하세요. 알람은 사용자 경험을 중단하고 탭을 눌러 해지시키도록 요구합니다. 그래서 사용자가 알람의 메세지가 침입을 보증한다는 사실이 느끼는 것이 중요합니다. 더 많은 정보를 보고싶다면 Alert.

알림을 받는 사용자의 환경을 존중해주세요.  설정에서, 사용자는 어떻게 그들이 앱으로부터 알림을 받는지 나타냅니다. 그들이 앱의 모든 알람을 끄는것이 유혹되지 않도록 환경설정에서 머무는것을 유의하도록 하세요.


'UI Design Basics' 카테고리의 다른 글

Modal Contexts  (0) 2015.04.30
Starting and Stopping  (0) 2015.04.28
Adaptivity and Layout  (0) 2015.04.24
iOS App Anatomy  (0) 2015.04.23
Designing for iOS  (0) 2015.04.22
Posted by jyunipark

댓글을 달아 주세요

시작하기와 중지하기

즉시시작

 사람들이 새로운 앱을 평가하는데 1-2분이상 걸리지 않는다고 말한다. 즉시 유용한 콘텐츠를 제공하여 짧은기간을 최대한 활용 할 때, 사용자들의 흥미를 유발하고 최상의 경험을 제공합니다.

가능 한 한, 시작화면이나 다른 시작경험을 표지하지 마세요. 사용자들이 앱을 즉시 사용할 수 있도록 하는 것이 최선입니다.

image: ../Art/avoid_startup_r_2x.png
image: ../Art/avoid_startup_nr_2x.png

사람들에게 설치정보 제공할 것을 요청하지마세요. 대신에

  • 사용자의 80%의 필요에 초점을 맞추어주세요. 이 작업을 수행할 때, 앱이 이미 그들이 예상한 방향으로 동작하게 설정되어있기 때문에, 대부분의 사람들은 설정에 어느것도 제공하지 못할 수도 있습니다. 몇사람들만이 원하는 기능이라던가 대부분의 사용자들이 오직 한번 만을 원한 기능이라면. 제외하십시오.

  • 다른 소스로부터 가능한 한 많은 정보를 얻으세요. 당신이  앱 제작이나, 장비 설정에 대해 제공하는 어떤 정보들을 사용할 수 있다면, 이 값에 대한 시스템을 조회할 수 있는 경우; 사람들에게 다시 입력하도록 하지 마세요.

  • 설치 정보를 요구해야 한다면, 사람들이 당신의 앱에 들어가도록 유도하세요.  그런다음,  정보를 가능한 한 빨리 저장하세요(잠재적으로, 당신의 앱 설정에). 이 방법으로 사람들은 그들이 앱을 즐길 기회를 얻기 전에 설정창으로 변환되는 것을 요구받지 않습니다. 사람들이 이 이 정보를 나중으로 요구한다면 언제든지 그들은 앱의 설정으로 들어갈 수 있습니다.

로그인에 대한 요청은 가능한 한 지연시키세요.  사용자가 앱을 통해서 많은 것을 탐색할 수 있고 로그인하는 것없이 많은 기능을 사용할 수 있는 것이 최선입니다. 예를들어, 앱스토어는 사용자들이 어떤 것을 구매하기로 결정하기 전까지는 로그인할 것을 요구하지 않습니다.  사용자들은 그들이 어떤 것들을 유용하게 할 수 있기 전에 로그인 할 요구할 것을 강요받으면 그 앱의 사용을 포기하곤 합니다.

사용자가 로그인 해야하는 경우, 사용자에게 어떠한 혜택이 있는지, 요구에대한 이유를 묘사한 설명을 간략하고 친절한 로그인창을 띄여 놓으세요.

보딩경험을 제공하기 전에 신중히 생각하세. (보딩은 앱의 기능을 소개하고 일반적인 작업을 수행하는 방법에 대해 설명합니다. 앱오리엔테이션) 보딩을 고려하기 전에, 모든 기능과 작업들이 직관적이고 쉽게 검색할 수 있도록 당신의 앱을 디자인하는것에 힘을 쏟으세요. 보딩은 좋은 앱 디자인을 위한 대체물이 아닙니다. 여전히 보딩이필요하다고 느끼신다면, 사용자를 방해하지 않게 간단하고, 타켓화된 경험을 제공하기 위한 다음의 지침을 따르세요.

  • 사용자들에게 그들이 시작하기 위해 필요한 정보만을 주세요. 훌륭한 보딩경험은 사용자들에게 그들이 무엇을 해야하는지 혹은 다수의 사용자들이 관심있어하는 몇몇 기능의 간략한 설명을 보여줍니다. 그들이 앱을 경험하는 기회를 주기전에 너무 많은 정보를 제공하게되면, 당신은 그들에게 당장 필요하지 않은 세세한 정보를 기억해야할 책임을 주는것입니다. 그리고 당신의 앱이 사용하기 어렵다는 메세지를 보내는 것일지도 모릅니다. 부가적인도움이 구체적인 업무수행을 위해 필요하다면 사용자들이 그 업무를 수행할때나 도움말을 제공하세요.

  • 사용자가 참여하고 수행하여 배울 수 있도록 상호작용과 애니메이션을 사용하세요. 경험을 풍부하게 하기 위한 경우, 사용자에게 긴 문장을 읽게 하시지 마시고 소량의 텍스트만을 추가하세요. 예를들어, 사용자들이 무엇을 해야 하는지 보여주는 애니메이션을 사용할 수 있을때, 어떻게 간단한 업무를 수행하는지 묘사하지 마세요. 사용자를 더 복잡한 업무수행으로 이끌어가기위해서는, 일시적인 사용자가 그것을 하려고 할 때 각각의 단계에서 간략하게 묘사한 오버레이 화면을 더할 수도 있습니다. 상호작용이 원활하지 않고, 사용자가 앱 UI와 혼동할 수 있기 때문에 되도록이면 스크린샷을 보여주지 말아야 합니다.

  • 보딩경험을 건너뛰거나 해제하기 쉽게 만드세요. 사용자가 보딩경험을 보아온 후에 아마도 다시 보는것은 원하지 않을 것입니다; 다른 사용자들은 그것을 보는 것을 전혀 원하지 않을지도 모릅니다. 사용자가 결정한 선택을 확실하게 기억하고 그들이 앱을 실행시킬때마다 확인을 강요하지 않도록 하세요.

사용자에게 성급하게 당신의 앱을 평가하는 것을 피하세요. 너무 빨리 평가를 하도록 하는 것은 사용자들을 귀찮게 하거나 당신이 받을 수 있는 많은 피드백의 양을 감소시킬 수도 있습니다. 잘 고려된 피드백을 권장하기 위해서는, 당신이 그들에게 평가를 받기전에 앱에 대한 의견을 형성하기위한 기회를 제공해야 합니다.  사용자들이 최소한의 다른 장면이나 최소의 업무수행을 할때까지 기다릴 수 있습니다.

일반적으로 장치의 현재 방향으로 시작하세요. 당신의 앱이 한 방향으로만 실행된다면, 당신은 항상 그 방향으로만 시작을 하거나 필요시 사용자들이 장치를 회전시키게 해야합니다. 예를들어 게임이나 미디어를 보는 앱이 가로형으로만 실행되는 것이라면, 앱이 현재 세로 방향에 있다고 하더라도, 가로방향에서 앱이 시작하는것이 적절합니다. 이와 같이 사람들이 앱이 세로형에서 있는동안에 앱을 실행시킨다면, 그들은 콘텐츠를 보기위해서 장치를 가로형으로 회전시켜야 한다는 것을 알 수 있습니다.

image: ../Art/default_orientation_2x.png

시작 파일이나 이미지를 제공하세요. iOS는 앱이 시작하는 순간에 사용자들에게 앱이 빠르다는 인상을 주고 콘텐츠를 불러오기위해 충분한 시간을 주는 시작 이미지를 보여줍니다.ㅡ  Launch Images에서 이미지나 시작파일을 제작하는 방법을 배우세요.

가능하면 그들이 다른 작업을 수행하기 전에 최종 사용자 라이센스 계약의 부인을 읽고 동의를 필요로 하지마세요. 대신에, 사람들이 당신의 앱을 받기전에 접근할 수 있게 하기 위해서 앱스토어에 권리포기서나 최종 소비자 계약 동의서를 보여지게 할 수 있습니다. 당신이 앱안에 이 항목들을 제공해야만 한다면, 사용자 경험필요와 당신의 UI와 사업요구의 균형이 조화를 이루는 방법에서 그것들을 통합해야만 합니다.

당신의 앱이 재시작 했을때, 사용자들이 그만둔 그 지점에서 계속할 수 있도록 상태를 저장해야합니다. 사람들은 앱에서 그들의 이전 위치에 도달한 그 단계를 기억 할 수 없습니다. 앱의 상태를 저장하고 보존하기위한 효과적인 방법에 대한 자세한 내용은  Preserving Your App's Visual Appearance Across Launches를 보세요.

항상 중지할 준비를 해놓으세요.

iOS앱은 닫기나 종료 옵션이 표시되지 않습니다.  사람들은 그들이 다른앱으로 전환하거나 홈스크린으로 돌아가거나, 잠자기 모드일때 앱의 사용을 중지합니다.

사람들이 앱을 끌때 iOS 멀티태스킹 이 상황을 준비하기위해서, 당신의 앱이 해야하는것:

  • 사용자의 데이터를 가능한 한 빨리 합리적으로 저장하세요. 백그라운드에 앱이 언제나 종료를 하거나 취소하겠다고 말할 수 있기 때문입니다.

  • 가능한 세부적인 최종 상태에서 멈췄을 때의 현상태를 저장하세요.이방법에서, 사람들은 앱의 뒤로 변환시켰을때 그들의 문맥을 잃지않습니다. 예를들어 당신의 앱이 스크롤한 데이터를 보여준다면 현재의 스크롤된 지점에서 저장하세요. 당신은 Preserving Your App’s Visual Appearance Across Launches.의 당신의 앱 상태를 저장하거나 보존하는 방법을 배울 수 있습니다.

일부 앱은 사용자가 전면화면에서 다른 앱을 실행시키는 동안 백그라운드에서 계속 실행해야 할 수도 있습니다. 예로, 사용자들은 그들이 해야할 일을 체크하거나 게임 실행을 하는 다른 앱을 사용하는동안에 앱에서 재생되고 있는 노래 를 계속 듣고 싶어할 수 도 있습니다.  Multitasking 에서 적절하고 정확하게 멀티태스킹을 다루는 방법에대해 알아보세요.

iOS앱을 프로그래밍 방식으로 종료하지 마세요.  사람들은 이것을 충돌로 해석하는 경향이 있습니다. 의도대로 작동되지 않는 앱을 막는 경우에는 당신은 사용자에게 그 상황에 대해 말하고, 그들이 그것에 대해 설명하는 것이 필요합니다. 다음은 이작업을 수행하는 좋은 방법이 있습니다. 

image: ../Art/all_features_unavailable_2x.png

모든앱의 기능을 이용할 수 없다면, 그 상황을 설명하고 수정을 요구하는 화면을 표시하세요. 정보는 사용자들에게 피드백을 제공하고 앱에 아무문제가 없다는 사실을 전해 안심시킵니다. 또한 사용자들을 통제 하에 두며 사용자들에게 개선조취를 취하게 하고 앱의 사용을 계속할지 다른앱으로 전환할지의 여부를 결정하게 합니다. 

몇몇의 기능이 사용불가능하다면 사람들이 그 기능을 사용하려고 할때 스크린이나 알림창으로 알려주세요. 그렇지 않고서, 사람들은 앱의 나머지를 사용할 수 있어야 합니다. 알람을 사용할 것으로 결정하면, 사람들이 작동하지 않는 그 기능에 접근하려 할때에만 보여주어야 합니다.

image: ../Art/one_feature_unavailable_2x.png


'UI Design Basics' 카테고리의 다른 글

Modal Contexts  (0) 2015.04.30
Starting and Stopping  (0) 2015.04.28
Adaptivity and Layout  (0) 2015.04.24
iOS App Anatomy  (0) 2015.04.23
Designing for iOS  (0) 2015.04.22
Posted by jyunipark

댓글을 달아 주세요

가변성과 레이아웃

가변성 구축

일반적으로 사람들은 모든 장치의 어느 방향으로 자신이 좋아하는 앱을 사용하고 싶어합니다. iOS8과 그 이상에서, 디스플레이 환경이 바꼈을때 크기 클래스와 스크린의 레이아웃, 뷰컨트롤러와 뷰가 어떻게 적용되어야 하는지 정하여 기대를 충족시키도록 돕는 자동 레이아웃을 사용합니다. (디스플레의 환경의 컨셉은 이러한 팝오버 또는 스플릿 뷰 제어기의 기본 뷰 영역으로써, 전체장치 또는 화면의 일부만을 참조할 수 있습니다.)

iOS 는 두가지 클래스로 정의합니다:일반(regular)과 소형(compact). 일반사이즈 클래스는 넓은 공간과 어울리고소형사이즈의 클래스는 제한된 공간과 어울립니다. 디스플레이 환경을 특징짓기 위해서, 수평 사이즈 클래스와 수직 사이즈 클레스를 지정합니다. 추측하였듯이, iOS장치는 세로방향을 위한 사이즈 클래스 중 한 셋트, 가로로 긴 배치 위한 사이즈 클래스들 중 다른 세트를 사용합니다.

디스플레이 환경의 사이즈 클래스가 바뀌었을때 iOS는 자동적으로 다양한 레이아웃의 변화를 가집니다. 예를들어, 세로 사이즈가 컴팩트에서 기본으로 바뀌었을때, 네비게이션 바와 툴바는 자동적으로 길어집니다.

레이아웃에서 변화를 조정하는 사이즈 클래스에 의존했을때, 당신의 앱은 어느 디스플레이 환경에서도 좋게 보일 수 있습니다. 인터페이스 구축에 있어서 어떻게 사이즈 클래스를 가지고 작업이 되는 것인지 배우고 싶다면, Size Classes Design Help.를 봐주세요.

사이즈 클래스가 다양한 장치의 디스플레이 환경에서 어떻게 나타나는지 시각적으로 표현한 예시가 있습니다. 예시로, 아이패드는 두 치수 두 방향에서 일정한 크기의 클래스를 사용합니다. 즉 iPad 디스플레이 환경은 항상 수평, 수직적으로 일정합니다.

세로방향의 iPad 사이즈 클래스

image: ../Art/ipad_size_class_v_2x.png

가로방향의 iPad 사이즈 클래스

image: ../Art/ipad_size_class_h_2x.png

iPhone의 디스플레이 환경은 장치와 방향에 따라 다양합니다.

image: ../Art/iphone02_size_class_v_2x.png

세로방향에서, iPhone6 Plus는 표준의 수직 사이즈클래스와 작은 크기의 수평사이즈클래스를 사용합니다.

가로형에서, iPhone6 Plus는 표준의 수평과 소형의 수직 사이즈를 사용합니다. 

image: ../Art/iphone02_size_class_h_2x.png

iPhone6를 포함하는 다른 모든 아이폰 모델들이 같은 세트의 사이즈 클래스를 사용합니다.

image: ../Art/iphone01_size_class_v_2x.png

세로방향에서, iPhone 6, iPhone 5 와 iPhone 4s는 표준의 수직 사이즈클래스와 작은 크기의 수평사이즈클래스를 사용합니다.

가로 방향이서 이 장치들은 수평 수직 모든방향에서 소형사이즈클래스를 사용합니다.

image: ../Art/iphone01_size_class_h_2x.png

각각의 환경에서 좋은 경험을 제공하라

가변에 대한 이로움이 잇을때, 당신의 UI가 디스플레이 환경에 적절하게 응답하도록 할 수 있습니다. 모든 장치와 방향에  좋은 경험을제공하기 위해 다음의 가이드라인을 따르세요.

모든 환경의 기본 내용에 중점을 유지하세요. 이것이 가장 우선순위입니다. 사람들은 그들이 관심있는 콘텐츠를 보고 상호작용 위해 앱을 사용합니다. 환경이 바뀌었을 때 중점이 변하는것은 사용자들에게 혼란을 줄 수 있고, 그들이 그 앱을 제어하는 권한을 잃은 것처럼 느끼게 합니다.

레이아웃의 불필요한 변화는 피하세요.  모든 환경에서 유사한 경험은 그들이 그 장치를 회전시키거나 다른 장치에서 앱을 실행시켰을때 그들의 사용패턴을 유지시킵니다. 예를들어, 수평의 기본 환경에서 이미지를 보기위해 그리드를 사용하는 경우, 그리드의 크기를 조절할 수도 있지만, 수평의 소형 환경에서 같은정보를 보여줄 필요는 없습니다. 

앱이 한 방향으로만 실행하는 것이라면 간단하게 하세요. 사람들은 당신의 앱이 다른방향에서도 사용할 수 있을 것이라 생각하고, 그 기대를 충족시킬 수 있는 것이 최선이라고 생각합니다. 하지만 당신의 앱이 오직 한 방향에서만 실행해야하만 한다면, 그렇게 해야합니다:

  • 사용자들에게 장치를 회전시켜달라고 하는 UI의 요소를 보여주는것을 피하도록 하세요.  회전이 요구된다면, UI에 불필요하게 어수선하게 불필요한것을 더할필요 없이 지원되는 방향의 운영으로 사람들에게 이 장치를 회전시킬것을 요구하세요.

  • 방향의 변형을 모두 지원하세요.  예를들어 앱이 가로형에서만 실행된다면 사용자들은 그들이 홈버튼을 오른쪽으로 잡고있든지 왼쪽으로 잡고있든지 사용할 수 있어야 합니다. 또한 앱을 사용하는동안에 장치를 180도 돌린다면 콘텐츠를 180도 돌려줌으로써 앱이 대응할 수 있도록 하는것이 최선입니다.

당신의 앱이 사용자 입력으로써 장치의 방향 변화를 말한다면 앱의 특정한 방법으로 회전을 다루세요.  예를들어, 사람들이 장치를 회전시켜  움직이게 하는 게임은 화면을 돌리는 것으로 장치의 회전에 응답할 수 없습니다. 이 같은 경우, 사용자가 필요한 방향의 모든 변형에서 시작하고 그들이 앱의 주임무을 시작하기까지는 두 변형 사이에서 전환할 수 있도록 해야합니다. 주요 작업을 시작으로, 앱의 특정한 방법에서 장치의 움직임에 응답하세요.

의사소통할 레이아웃을 사용하라

레이아웃은 어떻게 UI요소들이 앱 화면상에서 보여지는지보다 더 많은것을 아우르고 있습니다. 레이아웃으로, 사용자들에게 무엇이 가장 중요한지, 그들이 무엇을 선택할 것인지, 어떻게 그것들이 연관되어있는지를 보여줍니다.

중요한 컨텐츠나 기능을 높임으로써 주 업무에 중점이 맞추어지기 쉽도록 하세요. 이것을 하는 몇가지 좋은 방법들은 화면의 상단 절반-왼쪽에서 오른쪽으로-화면의 좌측근처에 주요 항목을 배치하는 것입니다.

image: ../Art/focus_on_main_task_2x.png

사용자들에게 화면상 요소들 중에 상대적 중요성을 보여주기 위한 시각적 무게와 균형을 사용하세요. 큰 아이템들은 눈에 띄고 작은것들보다 더 중요해보이는 경향이 있습니다. 더 큰 항목들ㅡ사용자들이 보통 주위가 어수선한 상태에서 사용하는 전화와 시계같은ㅡ은 사용자가 누르기 쉽고, 앱중에서 특별이 더 유용하도록 만듭니다.

image: ../Art/phone_hangup_button_2x.png

훑어보기 쉬운 정렬을 사용하고 분류 또는 계층구조와 소통하세요 . 정렬은 앱이 깔끔하고 정리되어보이게 만들며, 그들이 정보로 가득찬 화면을 스크롤하는 동안에 집중 할 공간을 줍니다. 들여쓰기와 다른 정보 분류의 정렬은 어떻게 그 분류가 연관되어있는지 보여주고 사용자가 특정한 항목들을 찾기 쉽게 만들어줍니다.

반드시 사용자가 기본사이즈에서 중요한 콘텐츠를 이해할 수 있도록 하세요. 예로, 사용자들은 중요한 텍스트를 읽기 위해 수직으로 스크롤을 하거나, 중요한 이미지를 보기위해 확대해서는 안됩니다.

텍스트 사이즈의 변화를 준비하세요. 사용자들은 그들이 설정창에서 다른 텍스트사이즈를 선택했을때 대부분에 앱에서 적절하게 반응할 것을 예상합니다. 글꼴크기의 변화에 대응하기 위해서는 레이아웃을 조정하는 것이 필요합니다. ; 당신의 앱에 나타나는 글자에대한 정보를 더 얻고싶다면, Text Should Always Be Legible. 을 봐주세요.

가능한 한, 당신의 UI에 일관되지 않는 모습은 피해주세요.  일반적으로 비슷한 기능을 가진 요소들은 비슷하게 보여야합니다. 사람들은 보통  그들이 알아챈 불일치에는 이유가 있다고 가정을 하고, 그것을 밝혀내기 위해 시간을 들이는 경향이 있습니다.

각각의 상호적인 요소에 충분한 공간을 줌으로써 사람들이 콘텐츠와 컨트롤에 상호작용하기 쉽게 하세요. 누를 수 있는 컨트롤에게 약 44x44 points의 표적공간을 주세요.

image: ../Art/interact_with_content_r_2x.png
image: ../Art/interact_with_content_nr_2x.png


'UI Design Basics' 카테고리의 다른 글

Modal Contexts  (0) 2015.04.30
Starting and Stopping  (0) 2015.04.28
Adaptivity and Layout  (0) 2015.04.24
iOS App Anatomy  (0) 2015.04.23
Designing for iOS  (0) 2015.04.22
Posted by jyunipark

댓글을 달아 주세요