UXUI 디자인 입문 1주차 1-6 (숙제)

내가 자주 쓰는 서비스 뜯어보기!!

 

사례조사 site

Pinterest 스크랩 이미지, 주제 ex) input UI, Card Ui, map Ui

mobbin (유료) 모바일+웹기반 일정개수만 무료

wwit 모빈과유사 국내앱화면 모아놓은 사이트 카테고리,패턴,컴포넌트 구분해서 찾기 편함

UX Pattern Achive 자주사용하는 ux패턴, 산업군, ux요소별로 필터 적용해볼수있음.

 

Toss토스

 

홈 - 상단우측 알림아이콘

홈 -예금-송금-보내기-입력인풋(카메라)

홈 - 하단화면설정버튼 클릭했을시 모달

홈 - 하단네비게이션바

(아티클을 더 읽어보고 추가내용으로 히그,머터리얼 직접 읽어보기) 

+다크모드설정

+보이스오버

 

*관련 아티클

https://blog.toss.im/article/tinyquestions-disability-5

[사소한 질문들] 토스가 '모바일 접근성' 에 진심인 이유는? - 금융이 알고 싶을 때, 토스피드

https://www.etnews.com/20211202000110

시각장애인 사용자(화면을 읽어주는 기능을 켠 고객 기준)가 고객센터 연결이 필요한 경우 우선 상담 배치로 빠르게 도움을 받을 수 있다. 이 외에도 스크린리더가 화면을 더 잘 읽어줄 수 있도록 최적화, 드래그할 필요없이 클릭만으로 위치 변경이 가능한 기능 추가 등 모바일 접근성에 대한 다양한 기능을 추가하고 있다.

기사내용중 이런말이 인상 깊다.

물론 나는 한번도 사용을 해본적이 없지만. 화면을 읽어주는 기능을 사용하는 고객이라면, 글씨를 키우는 기능도 있지만 읽어주는 기능이 때론 편할수 있을 거고, 상담 배치를 빠르게 해주니 손쉽게 도움을 받을 수 있고, 토스라는 기업이 진짜 장애인을 위해 진심으로 생각하는 부분이라 생각한다.

 

*분석

 

장점

- 알림아이콘

알림은 쉽게 볼 수 있어야하고 들어갔을때 시선이 위에서 아래로 보통 내려가니 상단에 배치하고

배지를써서 빨간표시를 해서 궁금증을 유발하게 잘 만든 것 같다. 

연결계좌가 중간 상단에 위치해 송금 버튼을 바로 누르면 어디로 돈 보낼까요? 하고 계좌번호입력 텍스트필드가있는데,

텍스트필드안에 카메라아이콘을 이용해 계좌번호도 직접쓰지 않고, 찍을 수 있게 해놨다.

일반인들도 편하지만 계좌를 일일이 치기어려운 어르신이나 장애인들은 터치 두번만에 계좌입력까지 끝이날 것이다.

하단 네비게이션 활성/비활성 상태를 아이콘의 크기와 색상으로 잘 구분해놨다. 

다크모드설정으로 빛번짐 최소화, 디자인적으로도 우수

보이스오버기능으로 시각장애인들이 편리/이용자 증가에 도움.

 

단점

홈화면설정버튼 이 하단부에 있어서 눈에 그렇게 띄지 않는듯 하다.

그리고 홈화면 설정에서 설정을 안하고 뒤로나가면 그대로 모달창이 떠야되지 않나 싶다. 다시 버튼을 눌러야하는 불편함이 있다. 뒤로나가기전 모달창을 보여줄지 말지를 결정하는 또 모달창이 있어야하려나? 이건 애매한듯싶다.

 

 

 

*휴먼인터페이스가이드라인 Human Interface Guidelines

버튼 Button

색상 Color

다크모드 Dark Mode

텍스트 Typogarphy

검색창 Search

팝업창 Alerts/Dialogs

로딩 Progress Indicators

 

*머터리얼디자인 Material Design

Human Interface Guidelines

 

notification&baege

 

1. 토스 상단 우측의 알림 부분, 토스뿐만아니라 알림기능을 내가 거의 다 받아놔서 휴대폰에 알림이 매일 무조건 뜨는데, 다보는것은아니지만 읽어보고 중요한것은 들어가보게 되고, 자동으로 자주쓰게 되는 기능이다.

 

alerts으로 검색했다가 제대로 내가 원한 것이 아니란 생각이들었다.

 

alerts은 말그대로 알람 기능이고,

기능적으로는 공지하는 용에 더 가까워서 notification으로 검색을 했더니,

정확히는 공지라는 말이 아이콘도 그렇고 더 맞다.

 

https://developer.apple.com/design/human-interface-guidelines/managing-notifications

 

알림을 보내기전에는 허가를 받아야 한다고 써져있다.

 

상세내용중...

 

포커스와 통합 관점에서?

사람들은 관심있는 사항에 대한 알림을 받는 것은 좋아하지만 방해받는 것을 항상 좋아하는 것은 아니다.

사람들이 경험을 관리하는 데 도움을 주기 위해 시스템에서 배송시간 지정하고, 포커스 설정할 수 있다.

 

모범 사례

각 알림의 긴급성을 정확하게 표현하여 신뢰를 구축하세요. 

해당 순간에 관련된 알림에만 시간에 민감한 중단 수준을 사용하세요.

 

마케팅 알림 보내기

마케팅 알림을 보내는 데 시간에 민감한 중단 수준을 사용하지 마십시오.

홍보 또는 마케팅 알림을 보내려면 사람들의 허락을 받으세요. 

사람들이 앱 내에서 알림 설정을 관리할 수 있는지 확인하세요.

 

모범사례에는 민감한 중단 수준을 사용하라고 되어있어서,

그밑에 먼말인지 더읽어보니

이러한 알림의 작동 방식을 설명하고 해당 정보에 즉각적인 주의가 필요하다는 점에 동의하지 않는 경우 알림을 끌 수 있는 방법을 제공합니다

즉각주의로 이럴때는 알림을 끌수도있다고 얘기를하라는게 중단 수준인거같고?

그렇다면 마케팅에서는 민감한 중단 수준을 사용하지 말라고 되어있는데,

사람들은 귀하의 앱에서 마케팅 알림을 수신하는 데 동의했을 수 있지만 이러한 알림은 절대로 집중 또는 예약된 전달 설정을 위반해서는 안 됩니다.

동의는했어도, (알림은 끌수있다말고, 동의한대신) 예약된 설정과 집중은 지키라. 위반하면 안된다의 말 같다.

같다. 

 

 

Input (Textfield)

 

인풋을 쳤는데 액션버튼, 포커스 셀렉션 등이나온다. 이걸 눌러서 입력이 된다는 소리도 맞지만 그거말고 Textfield가 더 가까운 의미인듯하다. 텍스트를 쳐서 입력을해서 송금을 하니 말이다.

 

모범사례

이름이나 이메일 주소와 같은 소량의 정보를 요청하려면 텍스트 필드를 사용하세요. 

목적을 전달하는 데 도움이 되도록 텍스트 필드에 힌트를 표시합니다.

개인 데이터를 숨기려면 보안 텍스트 필드를 사용하세요. SecureField

가능한 한 텍스트 필드의 크기를 예상되는 텍스트의 양과 일치시키십시오.

여러 텍스트 필드의 간격을 균등하게 유지하세요. 

사람들이 기대하는 대로 여러 필드 사이의 탭 이동이 흐르는지 확인하세요. 

타당할 때 필드의 유효성을 검사하십시오. 

숫자 포맷터를 사용하면 숫자 데이터에 도움이 됩니다. (한글,영어등 언어말고, 숫자만)

현장의 필요에 따라 줄 바꿈을 조정합니다.

잘린 텍스트

줄 바꿈된 텍스트

잘린 텍스트

 

아래 내용들이 추가로 더있는데 애플 가이드라인이라서 자세한거는 나중에 더 들여다보면 좋을듯하다.

 

잘렸거나 잘린 텍스트의 전체 버전을 표시하려면 확장 도구 설명을 사용하는 것이 좋습니다. 

확장 도구 설명은 일반 도구 설명 처럼 작동하며 누군가 필드 위에 포인터를 놓으면 나타납니다.

iOS, iPadOS, tvOS 및 VisionOS 앱에서는 적절한 키보드 유형을 표시합니다. 

tvOS 및 watchOS 앱에서 텍스트 입력을 최소화하세요.

 

확장 도구 설명은 일반 도구 설명 처럼 작동하며 누군가 필드 위에 포인터를 놓으면 나타납니다.

 

버튼은 따로 찾아보기로하고, modal에 대해 분석한다.

 

modal

 

애플에서는 모달을 어떻게 설명하고 있을까?

 

애플에서는 Modality라는 명칭을 쓴다.

 

 

콘텐츠를 모달로 표시하면 다음이 가능합니다.

• 사람들이 중요한 정보를 수신하고 필요한 경우 그에 따라 조치를 취하도록 보장
• 사람들이 가장 최근 작업을 확인하거나 수정할 수 있는 옵션 제공
• 사람들이 이전 상황을 추적하지 않고 명확하고 좁은 범위의 작업을 수행할 수 있도록 지원
• 사람들에게 몰입형 경험을 제공하거나 복잡한 작업에 집중하도록 돕습니다.

모범사례

 

명확한 이점이 있는 경우에만 콘텐츠를 모달 방식으로 표시하세요.

모달 작업을 단순하고, 짧고, 능률적으로 유지하는 것을 목표로 하세요. 

앱 내에서 앱처럼 느껴지는 모달 경험을 만들지 않도록 주의하세요. 

심층적인 콘텐츠나 복잡한 작업에는 전체 화면 모달 스타일을 사용하는 것이 좋습니다. 

항상 사람들에게 모달 뷰를 무시할 수 있는 명확한 방법을 제공하십시오.

필요한 경우 모달 보기를 닫기 전에 확인을 받아 데이터 손실을 방지할 수 있습니다.

모달 뷰의 작업을 쉽게 식별할 수 있도록 합니다. 

사람들이 다른 모달 뷰를 제시하기 전에 모달 뷰를 닫을 수 있도록 하세요.

 

Navigation

 

내비게이션 바는 창이나 화면 상단에 나타나 사람들이 콘텐츠 계층 구조를 탐색하는 데 도움을 줍니다.

 

내비게이션이 메뉴바랑 의미가 같은거로 알았는데, 좀 다른듯 하다.

애플은 세분화가되어있는듯하다.

 

아이콘이라기보다 텍스트 제목으로 간결하게 작성하라고되어있다.

 

 

tabbar라는 명칭이 좀 더 가까워보여서 tabbar로 보려한다.

탭을 클릭할때마다 화면이 바끼니까 말이다. 그 탭에 아이콘이 들어간다해도 그거는 변함이 없으니까말이다.

 

탭 표시줄은 표시줄 항목을 사용하여 동일한 보기에서 상호 배타적인 콘텐츠 창 사이를 탐색합니다.

탭 표시줄은 보기가 제공하는 다양한 유형의 정보나 기능을 이해하는 데 도움이 됩니다. 또한 각 섹션 내에서 현재 탐색 상태를 유지하면서 보기 섹션 간에 빠르게 전환할 수 있습니다.

 

모범사례

작업을 제공하는 것이 아니라 탐색을 지원하려면 탭 표시줄을 사용하세요.

사람들이 앱의 다른 영역으로 이동할 때 탭 표시줄이 표시되는지 확인하세요. 

사람들이 앱을 탐색하는 데 필요한 최소한의 탭을 사용하세요. 

콘텐츠를 사용할 수 없는 경우에도 탭을 계속 표시하세요.

각 탭 제목에는 간결한 용어를 사용하세요. 

배지를 사용하여 눈에 띄지 않게 의사소통하세요. 

 

대상 차원

 

아이콘 모양일반 탭바, 컴팩트 탭바(좌,우) 

 

어떤 픽셀로해라 가이드 라인인가 표까지 정리가 잘되어있다.

원	25x25포인트	18x18포인트
	50x50픽셀 @2x	36x36픽셀 @2x
	75x75픽셀 @3x	54x54픽셀 @3x
정사각형	23x23포인트	17x17pt
	46x46픽셀 @2x	34x34픽셀 @2x
	69x69픽셀 @3x	51x51픽셀 @3x
넓은	31포인트	23포인트
	62픽셀 @2x	46픽셀 @2x
	93픽셀 @3x	69픽셀 @3x
키가 큰	28포인트	20포인트
	56픽셀 @2x	40픽셀 @2x
	84픽셀 @3x	60픽셀 @3x

 

https://developer.apple.com/design/human-interface-guidelines/tab-bars

 

자세한 내용은 링크로 첨부한다.

 

Material Design

 

notification&baege

 

머터리얼 디자인에서는 notification이라고 치니 Badge가와 dialogs 나왔다.

Bage먼저 본다.

 

배지는 탐색 항목 및 아이콘에 대한 알림, 개수 또는 상태 정보를 표시합니다.

라벨이나 숫자를 포함.

 

1. Small bage
2. Large bage
3. Large badge with max characters

• 라벨이나 숫자를 포함할 수 있습니다.
• 두 가지 유형: 소형 및 대형
• 아이콘 경계 상자 내부의 앵커 배지(아이콘 위쪽 끝 부분)
• 콘텐츠를 '+'를 포함하여 4자로 제한하세요.
• 기본 색상 매핑 유지

 

콘텐츠 + 얘기는 999+ 4자로이렇게 제한하란 소리

 

피그마로 설계 가능하고~

 

 

dialog가 대화상자라고 번역이되네!

대화상자

대화 상자는 사용자 흐름에서 중요한 프롬프트를 제공합니다.

 

• 대화 상자를 사용하여 사용자가 정보에 따라 행동하는지 확인
• 두 가지 유형: 기본 및 전체 화면
• 단일 작업을 완료하는 데 전념해야 함
• 작업과 관련된 정보도 표시할 수 있습니다.
• 진행 상황 삭제와 같은 고위험 작업을 확인하는 데 일반적으로 사용됩니다.

 

알림을 주고 클릭했을 때 나타나는 다이어로그창까지 알아본다.

 

1. Basic dialog
2. Full-screen dialog

 

피그마로 설계 가능하고~ material design kit 라는 플러그인을 통해서 다양한 샘플을 볼 수있다.

https://www.figma.com/file/IYixbDQFTltioqMSIcohnW/Material-3-Design-Kit-(Community)?type=design&node-id=47909-2&mode=design&t=RHzQcIqBKq1nFhsB-0

 

활용을 잘한다면 저 키트에 맞게 활용하면 좋을 것같다.

 

왼쪽UI Use dialogs for prompts that block an app’s normal operation, and for critical information that requires a specific user task, decision, or acknowledgement

앱의 정상적인 작동을 차단하는 프롬프트와 특정 사용자 작업, 결정 또는 확인이 필요한 중요한 정보에 대화상자 사용

오른쪽UI Don’t use dialogs for low- or medium-priority information. Instead use a snackbar, which can be dismissed or disappear automatically.(하지말아야되는것)

우선순위가 낮거나 중간인 정보에는 대화상자를 사용하지 마십시오. 대신 자동으로 무시하거나 사라질 수 있는 스낵바를 사용하십시오.

 

좀 더 자세한 내용까지는 

반드시 읽어보기..분석하는 시간이 너무 길어지고, 간단하게 함축하면 이해가 안될 것같으니, 여러번 읽으려고 링크를 첨부한다.

https://m3.material.io/components/dialogs/guidelines

 

 

1. Container
2. Icon (optional)
3. Headline (optional)
4. Supporting text
5. Divider (optional)
6. Actions
7. Scrim

 

Input

 

 

Filled and outlined  text fields

 

안에가 채워진 필드와 아웃라인으로 된 텍스트 필드

(개인적으로는 스트로크 아웃라인으로 되어진 필드가 더 나은거 같기도하다.)

 

연락처나 결제 정보를 입력하는 등 누군가가 UI에 텍스트를 입력해야 하는 경우 텍스트 필드를 사용하세요.

 

보통 회원가입할때 Input을 개발자시절때 만들어본적이 있다. 그때도 머터리얼디자인에 대해서 들어서 그렇게 쓰라고하셨던 것 같은데, 명확한 디자이너 직무가 없었어서 얼렁뚱땅 만들었던 것 같다.

지금 생각하면 아예 도움이 안된건 아니지만 하나하나 기능을 그냥 아는 것말고 어떤식으로 모범사례가 있고, 사용자 관점에서 보기편한게 무엇인지 이런거도 정말 대충 생각했던것 같은데, 하나하나 들여다보고 깊게 파다보면 재미가 있으면서도 어렵다.

 

 

두 가지 유형의 텍스트 필드 모두 컨테이너를 사용하여 상호 작용에 대한 시각적 단서를 제공하고 동일한 기능을 제공합니다.

윤곽선이 있는 텍스트 필드

윤곽선이 있는 텍스트 필드는 채워진 텍스트 필드보다 시각적으로 덜 강조됩니다.

양식과 같은 위치(많은 텍스트 필드가 함께 배치됨)에 표시되면 강조가 줄어들어 레이아웃을 단순화하는 데 도움이 됩니다.

 

양식이 있을때는 단순화 하는데 도움이 되는구나. 

나는 왜 스트로크가 있는게 명확해서 더 좋다고 생각했을까?

배경색이 채워진것이 강조를 더 해주는 느낌이란걸 배워간다.

나의 주관이 너무 개입되었어... ㅠㅠ

 

텍스트 필드 선택

 

두 가지 유형의 텍스트 필드 모두 동일한 기능을 제공하므로 사용하는 텍스트 필드 유형은 스타일에만 따라 달라질 수 있습니다.

 

 

다음과 같은 유형을 선택하세요.

• 앱의 시각적 스타일에 가장 잘 맞습니다.
• UI 목표를 가장 잘 수용합니다.
• 다른 구성 요소(예: 버튼) 및 주변 콘텐츠와 가장 구별됩니다.

회원가입 양식이라면 우측이 더 낫다고 한거같은데.

 

동일한 화면에서 두 가지 유형의 텍스트 필드 사용

 

 

왼쪽UI When using both types of text fields in a UI, separate them by region

수정 컨택트 화면에 있는 텍스트필드는 채워진필드이고,

모달창에서 눌러서 필드를 추가할때 그 필드의 창이 아웃라인필드인데,

화면과 모달창은 영역이 구분되어 두가지 모두 사용 가능하다는 의미

 

다시말하면 두가지 유형 텍스트필드 사용시 영역별로 구분해서 쓴다

섹션내에서 동일한거끼리

 

오른쪽UI When using both types of text fields, don't use both next to each other or whthin the same form.

두가지 유형 모두 텍스트필드를 사용할때,  서로이거나 같은 양식내에서 사용하지말라.

즉 동일섹션에는 혼합되어서 안된다는 의미인데.

오른쪽UI처럼 쓰지말라는거임!!!

 

두 가지 유형의 텍스트 필드가 UI에 사용되는 경우

서로 다른 섹션 내에서 일관되게 사용해야 하며

동일한 영역 내에서 혼합되어서는 안 됩니다. 

 

예를 들어 한 섹션에서는 윤곽선이 있는 텍스트 필드를 사용하고 다른 섹션에서는 채워진 텍스트 필드를 사용할 수 있습니다.

 

 

 

채워진 텍스트 필드

1. Container (enabled)
2. Leading icon (optional)
3. Label text (unpopulated)
4. Label text (populated)
5. Trailing icon (optional)
6. Active Indicator (focused)
7. Caret
8. Input text
9. Supporting text (optional)
10. Active indicator (enabled)

 

윤곽선이 있는 텍스트 필드

1. Container outline (enabled)
2. Label text (empty)
3. Leading icon (optional)
4. Label text (populated)
5. Trailing icon (optional)
6. Container outline (focused)
7. Caret
8. Input text
9. Supporting text (optional)

세부적인 설명은 읽어보고, 길어져서 링크를 단다.

fill textfield 와 outlined textfield의 기능들이 거의 비슷하나 명칭이 살짝 다른것 있어서, 살펴보고 넘어가려한다.

더 자세한 내용도 반드시 읽어봐야할듯 

정리가 잘되어있다.

 

 

modal

 

modal이라고 치면 머터리얼 디자인에서는 dialog가 나온다. 맥락상 같은 의미인것 같다. 

 

Navigation

 

• 작은 창 크기 에서 탐색 모음 사용
• 동일한 중요성을 지닌 대상을 3~5개 포함할 수 있습니다.
• 목적지는 변하지 않습니다. 앱 화면 전체에서 일관성을 유지해야 합니다.
• 하단 탐색이라는 이름을 사용했습니다.

 

애플은 내비게이션이라 치면 좀 제목밑에 하위 버전이 있고 그런식으로 경로를 의미하는 것처럼 얘기를 한다.

그런데 머터리얼에서는 내비게이션이라 표기한다.

https://www.figma.com/community/file/1035203688168086460

 

피그마 링크통해서 보면 가져다 활용할 수 있다.

 

M2: The navigation bar is positioned above page content, as indicated by a drop shadow. Filled and regular weight icons indicate active states; regular outline icons indicate inactive states.

M2: 드롭 섀도우로 표시된 것처럼 네비게이션 바는 페이지 콘텐츠 위에 위치합니다. 채워진 무게 아이콘과 정규 무게 아이콘은 활성 상태를 나타내고, 정규 윤곽 아이콘은 비활성 상태를 나타냅니다.

M3: Active states are represented with filled icons and a contrasting pill-shaped active indicator, while inactive states are represented with outlined icons. The height of the navigation bar is taller.

M3: Active states are represented with filled icons and a contrasting pill-shaped active indicator, while inactive states are represented with outlined icons. The height of the navigation bar is taller.

 

M3: 활성 상태는 채워진 아이콘과 대조적인 알약 모양의 활성 표시기로 표시되고 비활성 상태는 윤곽 아이콘으로 표시됩니다. 탐색 모음의 높이는 더 높습니다.

 

아이콘 색상이나 bold로도 나타내는 것 같은데 그 내용은 없는 듯하다.