2023. 6. 7. 21:14ㆍ기록/UXUI 스터디
https://brunch.co.kr/@zungyeonlee/12
아이폰 집중모드의 UX, 힉의 법칙과 컨텍스트 디자인
해외 아티클 리뷰 (3) | 몇 달 전, 내 아이폰이 벽돌로 변해버린 대참사가 있었는데.. 눈물을 머금고 초기화시키면서 iOS 15로 자동 업데이트되었다. 그러면서 알게 된 iOS 15의 새로운 기능들. 그중
brunch.co.kr
- 집중모드 : 사용자가 집중하고 싶은 것에 따라 알림과 앱을 필터링 하는 기능
- 집중모드를 만든 이유는 뭘까
: 복잡한 바탕화면이 인지 부하를 일으킬 가능성이 높다
- 힉의 법칙(Hick’s Law)
사용자에게 주어진 선택지의 수나 복잡성이 늘어나면 결정에 걸리는 시간이 더 많이 소요된다
-> 주의 분산되어 중요한 것을 찾지 못하게 되거나 필요로 하는 것에 쉽게 도달핮 ㅣ못한다
- 비슷한 성격의 앱을 묶을 수 있는 그룹핑 기능이 있지만 앱까지 도달하는 뎁스만 늘어나는 꼴이될 수 있다
[아이폰의 솔루션 - 컨텍스트 디자인(Context Design)
- 컨텍스트 디자인 : 제품이나 서비스를 누가, 어디서, 어떻게 사용하는지 전체적인 사용 맥락을 파악하여 제품과 서비스의 가치를 높이고자 하는 방법론
-> 누가 : 객관적인 프로필 뿐만 아니라 페인 포인트, 니즈, 만족도, 누구와 함께 등을 자세히 분석 후, 이를 기반으로 사용자 경험을 설계한다
- 집중 모드일 땐 아이폰 사용 맥락에 맞추어 관련 앱 만을 바탕화면에 보여준다
- 집중 모드일 땐 바탕화면, 위치 정보를 설정할 수 있다
-> 결과적으로 인지부하가 확 줄어든다
-> 업무 외 독서, 게임, 마음 챙기기, 운전, 피트니스 등 다양한 사용 맥락을 위한 집중 모드를 지원한다.
[느낀점]
저는 아이폰 유저가 아니기 때문에 해당 기능이 있다는 것이 흥미로웠습니다. 실 사용 폰으로 테스트 앱도 받고 있기 때문에 제 폰은 꽤나 어지러운 편인데, 집중 모드가 있으면 굉장히 편할 거라 생각되었어요. 실제로 어떤 앱을 찾기 위해 슬라이드를 몇번이고 한 적도 있었습니다ㅠㅜ.. 어떻게 보면 사소한 것인데 이러한 부분까지 고려해서 집중 모드를 만들어낸 아이폰을 보면 역시 잘 설계가 되었다는 생각이 들었습니다. (이번 달에 투폰으로 14프로를 샀습니다 예이~)
멤버들 아티클 공유
[모드에 대한 Jef Raskin의 정의]
https://handwiki.org/wiki/Mode_(computer_interface)
모드에 대한 Jef Raskin의 정의를 소개하는 글을 읽었어요. 원래 The Humane Interface에 소개된 내용을 요약한 걸로 보입니다.
래스킨의 정의에 따르면 “모드가 있는 인터페이스modal interface”란 1) 인터페이스의 현재 상태가 사용자의 주의 소재가 아니면서 2) 동일한 제스처에 대한 인터페이스의 작동이 해당 상태에 따라 달라지는 인터페이스를 말해요.
예를 들어 1) 운영체제에 ”한/영“ 상태가 있고 현재가 한글 상태인지 영어 상태인지에 사용자가 주의를 두고 있지 않으면서(즉, 한영상태에 주의 소재가 없으면서), 2) 한영상태에 따라 키입력 시 한글이 입력되는지 영어가 입력되는지에 차이가 있으면(즉, 상태에 따라 동일 제스처에 대한 시스테의 동작이 달라지면) 한영입력 인터페이스는 모드가 있는 인터페이스로 정의하게 됩니다.
래스킨은 인간의 주의소재가 단일하고 주의소재는 인터페이스 그 자체가 아닌 과업에 두어야하기 때문에, 만약 모드가 있는 인터페이스를 쓴다면 1) 실수를 안하려고 주의소재를 인터페이스로 향하게 하여 과업에 집중하기 어렵게 만들거나 2) 과업에 집중하면 모드 오류를 일으키게 만든다는 점에서, 되도록이면 모드가 있는 인터페이스를 쓰지 말아야 한다고 주장했어요.
[사용자 경험과 다크모드]
사용자 경험 (UX)이라는 용어는 인터렉션과는 다르게 제품을 사용할 때 사람들이 마주하는 다양한 경험을 설명하는 데 사용됨.
✅ 좁은 의미의 사용자 경험 : 사용자가 제품을 사용하면서 느끼는 서비스 경험, 인터렉션 과정의 경험.
✅ 넓은 의미의 사용자 경험 : 제품 사용과 직접적으로 관련이 있지 않더라도 특정 브랜드에 대한 인식, 제품 광고에서 느껴지는 분위기, 제품의 포장 진열 방식 등, 판매점 분위기나 A/S센터의 고객 응대
인터렉션 디자인 (IxD)
인터렉션 디자인이란 인간이 제품이나 서비스를 사용하면서 상호작용을 쉽게 할 수 있도록 만들어준 디자인 분야
인터렉션 디자인은 UX 디자인의 일부이다.
UX 디자이너는 브랜딩, 디자인, 유용성 및 기능 측면을 포함한 전체 사용자 여정과 관련이 있다.
인터렉션 디자이너는 사용 순간과 상호 작용 경험을 개선하는 방법을 목표로 한다.
즉 인터렉션 디자이너는 사용자 경험의 중추적 역할!
(텍스트가 너무 많은 알림을 받거나, 지나치게 긴 애니메이션이거나, 사용자의 요구에 맞지 않은 디자인을 할 경우 그 디자인은 실패할 것)
-------------------
⭐️ 왜 꼭 다크모드를 지원해야 할까?
1️⃣ 어두운 색을 사용할수록 전력 소모가 줄어든다.
👉 OLED 디스플레이일 경우에만 해당. (OLED란 자체 발광 디스플레이로 백라이트가 필요하지 않아서 제품의 두께를 더욱 얇게 만들 수 있고, 구부릴 수 있는 디스플레이 제작이 가능하다는 특징이 있음)
👉 OLED 점유율이 높아지고 있음. #000000 의 컬러를 사용할 경우 OLED 패널을 꺼버리기 때문에 전력 소모 = 0
2️⃣ 어두운 환경에서의 눈의 피로도를 줄인다
3️⃣ 콘텐츠 몰입도를 높인다.
ex) 어두운 영화관, 영화관과 같은 몰입도를 주기 위해 항상 어두운 넷플릭스 UI
⭐️ 왜 꼭 다크모드를 지원해야 할까? (진짜 이유)
1️⃣ 시스템 (OS)에서 화이트 모드를 지원하기 때문
👉 시스템에서 화이트 모드를 사용하는 유저가 있을 수도 있고, 다크 모드를 사용하는 유저가 있을 수도 있다. 다크모드에 노출되던 유저가 화이트 모드만 지원되는 어플에 진입했을 때의 이질감을 최소화하기 위해
2️⃣ 유저의 취향 고려
👉 유저마다 좋아하는 취향이 다르다. 밝은 UI를 좋아하는 사람이 있고, 어두운 UI를 좋아하는 사람이 있다. 사용자가 취향을 선택하게 할 수 있도록 하기
⭐️ (주장1) 배경에 Dark Gray를 사용해야 한다.
1️⃣ 넓은 범위의 컬러, 깊이, 높이를 표현하기 용이 (완벽한 블랙보다 그림자 사용이 용이)
2️⃣ 밝은 본문과의 대비 최소화
3️⃣ OLED의 경우 완벽한 블랙을 사용하면 화면 변화 시 미세한 딜레이 발생
⭐️ (주장2) 배경에 Black을 사용해야 한다.
1️⃣ 배경 위에 올라가는 컴포넌트들과의 명확한 대비
2️⃣ 베젤 (디스플레이 테두리) 과의 경계를 없애 확장된 UI 경험을 제공
참고자료 : https://brunch.co.kr/@hyoi0303/38
https://brunch.co.kr/@dnwhdrb98/6
[모드슬립]
https://www.nngroup.com/articles/modes/
모드가 사용되는 경우는 보통 여러가지의 모드가 있는데 그것을 스크린에 표현할 방법이 제한적인 경우 사용된다고 합니다.
이 아티클에서는 모드가 어떤방식으로 사용되었을때 오류를 발생시킬 수 있는지에 대해서도 설명하는데 그부분에 집중해봤어요.
-
모드슬립(mode slip - 사용자가 햔재 액티드한 모드를 인지하지 못하는 경우 발생)은 대체로 시스템이 사용자에게 현재의 상태를 제대로 알려주지 않을때 발생한다고 합니다. 다른 모드를 사용할 경우에는 같은 컨트롤러를 이용해 그것을 조정하게 되는 경우들이 존재하는데 사용자에게 모드에 대한 안내가 부족할 경우 의도하지 않은 오류가 일어날 수 있습니다.
흔한 예시로 이메일을 보낼때 reply all, reply 버튼의 구별이 가지 않아 이메일을 잘못 보내는 경우가 있죠!
-
이를 방지하기 위해서는
1. 현재 모드에 대한 구별이 확실하도록 하기
2. 현 모드의 효과에 대해 명확하게 보여주기
3. 모드 슬립이 위험한 결과를 초래할 수 있을 경우 모드 자체를 피하기
4. 구조적인 애러 메시지(현 모드에서 할법한 행동이 아닌데 한 경우 애러 메시지 보내기 ex. caps lock이 켜져있습니다)
5. 앞으로 컴퓨터가 할 일에 대해서 안내하기(현 모드에 대해 알려줄 수 있다면 더 좋습니다)
해결책 부준은 다이얼로그가 길어서 더 궁금하신 분들은 링크 참조해주시면 좋을 것 같습니당
[다크 모드와 라이트 모드]
https://brunch.co.kr/@outlines/39
https://www.nngroup.com/articles/dark-mode/
다크모드와 라이트모드에 대한 글을 읽었어요. 저는 화면 모드에 따른 가시성에 대해 더 찾아봤습니다!
<다크모드에서 더 잘 읽히는 것은 아니다.>
눈은 빛 자체를 보는 것이 아니라 빛의 변화, 즉 대비를 보기 때문에 인접한 디테일의 대비를 제아하는 것이 가독성의 가장 중요한 요소라고 합니다.
흰색 바탕에 검은색을 “positive polarity”이라 하고, 검은색 바탕에 흰색을 “negative polarity”라고 하는데, positive polarity가 모든 면에서 성능이 더 좋았다고 해요. 특히 글꼴의 크기가 감소함에 따라 positive polarity의 이점이 선형적으로 증가한다는 점이 흥미로웠어요. 글꼴이 작을수록 사용자는 라이트 모드에서 더 잘 볼 수 있대요.
또 재밌었던건 실험에서는 라이트 모드가 성능 면에서 더 나은 결과를 보여줬지만, 사용자들은 라이트모드와 다크모드의 성능차이에 어떠한 차이에 대해 어떠한 보고하지 않았다고 합니다.
<장기적 효과>
하지만, 장기적 효과로 봤을 때에는 다크모드가 더 좋을 수 있다고해요. 라이트 모드에 지속적으로 노출되면 망막 뒤 맥락막이 얇아져 근시로 이어질 수 있다고 합니다. 따라서 저시력 사용자에게는 다크모드가 더 낫다는 암묵적 합의가 있대요.
결과적으로는 시력과 주변 환경 등 많은 요소에 따라 라이트 모드와 다크 모드의 이점이 다르기 때문에 두개 다 사용자에게 제공하고, 사용자가 직접 선택하도록 권장하고 있어요! 특히 long-term reading 애플리케이션에서 다크모드 기능을 제공하는걸 강력하게 권장하고 있습니다.
['다크 모드'가 해결하는 것보다 더 많은 접근성 문제를 일으키는 이유]
- https://medium.com/@h_locke/why-dark-mode-causes-more-accessibility-issues-than-it-solves-d2f8359bb46a
- 다크모드가 난시에게 어떤 접근성 문제를 일으키는지, 심지어는 실제로 난시를 악화시키는 문제가 생긴다는 점을 시사하는 아티클입니다. 결론적으로 사용자에게 제어권을 부여하자는 말로 맺어지는데, 국내도 난시환자가 2021년 99만명으로 100만명 돌파가 임박했다고 해 다크모드는 선택사항으로 제공이 필요할 것 같아요. (저도 난시가 있는데 걱정스럽네요…)
- [다크 모드 UI 디자인: 완벽한 가이드]
- https://compilezero.medium.com/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
다크모드 진행시, 헷갈리는 팁들을 많이 정리해둔 가이드라 도움될 것 같아 업로드해요!
[Google Assistant driving mode와 Android Auto: 차이점]
https://www.makeuseof.com/google-assistant-driving-mode-vs-android-auto/
저는 운전모드에 대한 글을 읽었어요! 운전모드는 운전에 집중할 수 있도록 음성을 사용하여 메시지를 읽거나 보내고, 전화를 걸고, 미디어를 제어할 수 있는 모드라고 합니다.
Android Auto는 23년 1월 부터 Android Auto CoolWalk 업데이트가 정식으로 런칭되어 순차배포중이며, Apple CarPlay와 비슷하게 변경되었다고 해요.
-
[Android Auto]
- 2015년 출시, Android 8이상 지원
- 스마트폰의 인터페이스를 차량의 대시보드 플레이에 미러링 하도록 설계
- 차량의 인포테인먼트 시스템에 표시되지 않음
- 볼보 차량에서도 화면의 대부분이 빈공간으로 남는 문제가 있음.
[Google Assistant driving mode]
- 2021년 출시, Android 9.0 이상 지원
- 해당 운전모드는 음성 명령을 사용하여 모든 것을 제어할 수 있기 때문에 운전자의 주의를 덜 산만하게 함.
- 음성 명령으로 제어하는 동안 핸즈프리 운전을 위해 설계된 사용자 인터페이스에 엑세스
[공통점]
- 사용자가 움직이는 차 안에 있음을 감지하면 자동으로 실행될 수 있으나, 설정을 활성화해야함
[차이점]
- Google Assistant 운전모드의 경우 호환되는 자동차와 스테리오가 필요하지 않음
- Google Assistant가 더 많은 국가에서 사용할 수 있음
- Google Assistantdml interface는 Android Auto보다 더 적은 옵션과 더 큰 카드로 재설계되어있음
- Android Auto는 스마트폰에 설치된 대부분의 앱을 지원하는 Google Assistant는 한정되어있음
- Android Auto interface가 가로모드로 보는데 더 적합함
-
* apple의 경우 카플레이와 운전모드를 확인할 수 있었는데 기능이 어떻게 들어있는지 재미있게 볼 수 있어 해당 링크도 추가합니다 :)
아이폰 운전모드
- https://support.apple.com/ko-kr/HT208090
애플 카플레이
-https://www.apple.com/kr/ios/carplay/