디자인 카타
* 어떤 방식이 정보를 저장하는데 효율적이라고 생각하시나요?
-
왜 해당 UI가 더 좋은 지 작성합니다.
B안(전체 수정 및 저장) 리스트 상세로 들어가지 않고도 여러 설정을 한 번에 변경하고 저장할 수 있으며, 변경 도중 실수해도 저장을 누르지 전까지 반영되지 않는다.
-
나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않은지 작성합니다.
A안(개별 수정 및 저장) 여러 개를 변경하려면 각각 들어가서 변경 후 저장해야 해서 번거로울 수 있다. -
내 의견을 뒷받침 할 수 있는 실 사례가 있는지 찾아봅니다. 도전
B안을 선택했지만 B안의 경우 단일 설정만 변경하고 싶을 때도 저장 버튼을 눌러야 하는 번거로움이 있을 수 있다. 반면에 A는 한 가지 설정만 빠르게 변경하고 저장할 수 있는 장점이 있다.
즉, 자주 개별 설정을 변경해야 한다면 A안, 한 번에 여러 설정을 변경하는 경우가 많다면 B안이 효율적 일 것 같다.
추가로 A안을 즉시 반영 방식, B을 명시적 저장 방식이라고 칭한다고 한다.
하루 한 장 UX의 법칙 100
DAY 09. 사람들은 특이한 것을 기억한다.
디자이너는 시각적으로 눈에 띄게 만들거나, 특정 항목에 주의를 끌고, 그룹 내에서 중요한 정보를 강조할 때면 일단 다르게 만들고자 한다. 대부분의 경우에 완전히 새로운 제품이 아닌 이미 존재하는 제품을 다루므로 영향력을 발휘할 가장 쉬운 방법은 다른 사람들이 하고 있는 것과 정반대로 하는 것이다.
DAY 10. 첫 번째와 마지막 항목이 가장 잘 기억된다.
1885년, 독일의 심리학자 헤르만 에빙하우스는 항목의 위치가 기억력에 미치는 영향을 알아보기 위해 스스로를 대상으로 기억 실험을 진행했다. 그는 목록의 첫 번째나 마지막에 위치한 항목들이 더 쉽게 기억된다는 사실을 발견했다. 그 이유는 순서의 첫 번째 항목은 장기 기억에 저장되고, 마지막 항목은 단기 기억에 저장되기 때문이다. 반면, 중간에 위치한 항목들은 뇌가 어떻게 처리해야 할지 잘 알지 못한다. 이런 편향을 서열 위치 효과라고 하며, 온라인에서 정보를 디자인 할 때 매우 중요 하다.
기억이 작동하는 방식을 이해하고, 서열 위치 효과를 UX에 활용하는 것은 매우 중요하다. 모든 정보가 동등하게 중요한 것은 아니다. 모든 정보가 쉽게 스캔되고 소화되도록 하는 것 외에도 우리가 사람들이 기억하거나 행동하길 원하는 것을 목록의 첫 번째나 마지막에 배치해야 한다. 우리가 디자인하는 모든 상호작용 모델은 중요하지 않은 부분을 자연스럽게 잊어버릴 수 있도록 하여, 사용자가 기억해야 할 부분에 집중할 수 있게 해야 한다.
식사 시간 팀 활동
* 구글의 캐러셀이 다르게 생긴 이유
https://brunch.co.kr/@hnjnkm/34
구글의 Material 3 디자인 시스템에서 새롭게 도입된 캐러셀 컴포넌트의 특징과 사용 방법이다. 기존의 캐러셀과 달리, Material 3의 캐러셀은 대형, 중형, 소형의 다양한 크기의 아이템을 포함하며, 스크롤 시 아이템의 크기가 변하면서 포커스가 이동하는 독특한 인터랙션을 제공한다.
- 멀티 브라우징형: 여러 항목을 한 번에 탐색하기에 적합하며, 다양한 크기의 아이템을 포함한다.
- 확장형: 모든 아이템이 동일한 크기로 표시되어 텍스트나 UI 요소를 추가하기에 용이하다.
- 히어로형: 주요 콘텐츠를 강조하며, 큰 이미지를 중심으로 다음 항목을 미리 볼 수 있다.
- 전체화면형: 몰입형 콘텐츠에 적합하며, 수직으로 스크롤된다.
Material 3의 캐러셀은 선택된 아이템의 크기 변화를 통해 주요 콘텐츠를 강조하고, 부드러운 애니메이션과 시각적 다양성을 제공한다. 이러한 특징은 사용자에게 더 직관적이고 매력적인 경험을 제공하지만, 새로운 인터랙션 방식이 기존 사용자에게 혼란을 줄 수 있으므로 디자이너는 사용자의 기존 경험과의 조화를 고려해야 한다.
캐러셀은 제한된 공간에서 다양한 콘텐츠를 제공하고 사용자의 흥미를 유도하는 데 유용한 컴포넌트이다. 그러나 사용자의 인지 부하를 줄이고 직관적인 인터랙션을 제공하기 위해 신중한 설계가 필요하다.
'UI 디자인의 모든 것' 2강-(1)
컬러
* 컬러의 의미
- 컬러는 사람이 어떤 사물이나 물체를 볼 때 가장 먼저 인지하는 요소이자 가장 오래 기억에 남는 요소이다.
- 그래서 브랜드 컬러는 사용자에게 브랜드의 이미지를 지속적으로 전달해서 기억하고 인지시킬 수 있는 중요한 역할을 한다.
* 컬러의 역할
💡 컬러는 중요한 정보를 강조하거나 사용자의 행동을 유도하기 위해 주로 사용하는 요소이다. 또한 브랜드 아이덴티티의 스타일을 결정하는 요소 중 하나이다.
- 중요한 정보 강조
- 정보의 중요도에 따라 채도나 명도를 활용하여 주요 요소와 보조 요소를 구분한다.
- 사용자의 행동 유도
- 버튼이나 링크에 컬러를 적용하여 사용자가 다음 단계로 나아갈 수 있도록 행동은 유도한다.
- 상태
- 사용자와 상호작용하면서 즉각적인 피드백(상태)을 전달한다.
- 브랜드 아이덴티티
- 브랜드 컬러를 지속적으로 사용자에게 전달하여 브랜드 아이덴티티를 각인시킨다.
* 컬러 비율
💡 5:25:70 의 비율을 활용할 수 있다. 5% 주색(브랜드 컬러), 25% 보조색, 70% 배경색으로 사용한다.
* 컬러 구성
💡 UI 디자인에서는 Primary, Secondary, Neutral, Semantic 컬러를 사용한다.
* 배경과 컬러
💡 컬러는 상대적이라 주변 환경(배경 색)에 따라 영향을 받는다.
- 다크/라이드 모드에 따라 배경색이 반전되기 때문에 각 모드에 맞는 컬러를 사용해야 한다.
* 형태와 컬러
💡 컬러는 상대적이라 형태에 따라 영향을 받는다.
- 면적이 넓은 배경과 면적이 좁은 텍스트와 같이 형태에 따라 컬러는 영향을 받는다.
- 배경에 사용된 경우 면적이 넓기 때문에 가독성이 높다.
- 반면, 텍스트는 상대적으로 면적이 좁아 가독성이 낮다.
- 형태에 따라 색상 코드값을 알맞게 적용하여 가독성을 높여야 한다.
* 과도한 컬러 사용 피하기
💡 한 화면에서 너무 많은 컬러를 사용하는 것은 사용자에게 혼란을 줄 수 있다.
🥰 Blah Blah
5강까지 완강했는데 많이 이해하지 못했다. 내일 재수강 하면서 다시 학습을 해야겠다. T.T
