나의 FE피봇이야기/UI (8) 썸네일형 리스트형 [UI]스켈렉톤 UI = Progress Indicator(Skeleton) “API 응답 시간이 짧은 경우에는 스켈레톤이 보여지지 않게끔” from KaKao tech 스켈렉톤 UI사용 이유는 (a) 사용자에게 현재 시스템이 시간이 필요하다. (b) 대략적인 시간은 얼마다 라는 정보를 전달하기 위해서이다. Progress indicators tell users (a) that the system needs more time to process the last user action (for instance, to load a file, or to install a new update), and (b) approximately how much time remains. https://www.nngroup.com/articles/progress-indicators/ Progress I.. [UI]기본값이 설문에 미치는 영향, 기본값 편향(default bias) 설문지 뿐만 아니라 컴퓨터에서도 기본값이 존재 한다. 허나 상품을 사거나 설문조사를 할 때, 기본값은 많은 영향을 미친다. 이것을 우리는 "기본값 편향"이라고 부른다. 기본값(Default)이란? 컴퓨터 과학에서 기본값 또는 디폴트(default)는 응용 소프트웨어나 컴퓨터 프로그램 또는 장치에서 사용자의 개입없이 자동으로 할당되는 설정 또는 값이다. 기본값 편향 설문조사의 기본값은 응답자가 다른 옵션을 고려하지 않고 기본 옵션을 선택할 가능성이 높은 경우 설문조사 결과에 영향을 미칠 수 있다. 이를 "기본값 편향"이라고 한다. 특히 기본 옵션이 강조 표시되거나 미리 선택되어 있는 경우 응답자가 다른 옵션이 있다는 사실조차 인지하지 못하는 경우도 있다. 행동경제학적으로 보면 기본값 선택은 정신적(인지적).. [UI] 텝(tabs)으로 구성할 것인가? 페이지(pages)로 구성할 것인가? 홈페이지를 만들다 보면 종종 몇가지 질문데 부딧치게 된다. 이 페이지는 어떻게 구성해야 사용자가 훨씬 편리하게 사용할수 있을까? 이번엔 콘텐츠를 바탕으로 텝(a tab)과 페이지(a page)로 어떻게 구성할 것인가에 대해서 논의해보도록 한다. 텝이란? 인터페이스 디자인에서 탭은 여러 문서 또는 패널을 단일 창에 포함할 수 있는 그래픽 사용자 인터페이스 개체이다. 특징 탭은 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 쉽게 전환할 수 있게 해주고 인터페이스 공간을 절약하는 데 유용할 수 있다. 하지만 너무 많은 탭이 열려 있으면 복잡해지고 사용자가 원하는 정보를 찾기 어려워질 수 있다 탭을 사용하면 공간을 절약하고 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 빠르게 전환 탭은 한 페이지.. [UI]사람은 어떻게 화면을 보는가? F 초두효과(Primacy effect)는 심리학 용어로 먼저 제시된 정보가 추후 알게 된 정보보다 더 강력한 영향을 미치는 현상을 말한다. 말 그대로 뇌에 처음 입력된 정보가 나중에 입력된 정보보다 가장 기억에 잘 남는다는 것이다. 미국 다트머스대 심리학과 폴 왈렌(Paul J. Whalen) 교수는 "인간의 뇌는 0.017초라는 짧은 순간에 상대방에 대한 호감이나 신뢰 여부를 판단한다"고 말했다. 우리는 홈페이지를 어떻게 눈으로 보는가? 우리나라에서는 z 보기로 알려짐 사용자는 먼저 콘텐츠 영역의 상단을 가로질러 수평으로 이동하며 읽습니다. 이 초기 요소는 F의 상단 바를 형성합니다. 그런 다음 화면 왼쪽 아래에 흥미로운 내용을 발견하면 두 번째 수평 이동을 통해 이전 이동보다 더 짧은 영역을 가로질러 .. [UI]사설서점 메인 페이지는 뭐로 구성될까? -조사 대상 : 교보문고, 알라딘 -자체 이벤트 : 도서 중심 이벤트 -비지니스 확장 : 도서 + 상품(자사가 운영하는 아이템 판매 연계) -문화 콘텐츠 : 텍스트 이외 방법으로 만들어진 콘텐츠 ex. 영상, 오프라인 만남 사설 서점에 공통적으로 가장 많이 사용하는 요소 순위 1등 : 광고(도서 판매) 2등 : 북 큐레이션 요약 사업자이다보니 상품을 팔아야 하는 것에 주된 목적이 있는 것을 알 수 있다. 책을 팔기 위해서 상품을 끼워 파는 이벤트를 열거나 북 큐레이션을 통해 책을 더 구매할 수 있도록 만든다. *하단 참조 이미지 참고 사설 서점 특징 : 알라딘 알라딘은 자체 이벤트와 북 큐레이션으로 사용자에게 첫 인상을 주려고 한다. 사실 여기서 자체 이벤트라고 뭉뚱그리긴 했지만 자체 이벤트를 살펴보면 .. [UX]토스 프로턱트 디자이의 UI 개선 이야기 이번에 토스 Product Desing분의 User eXperience 를 바탕으로 한 User Interface 이야기를 공유해볼까 합니다. 원글 https://toss.tech/article/thinking-user-perspective 사용자 관점을 인식하기 위해서 메이커가 주의해야 할 상황 1. "이건 당연히 알 수 있는거 아닌가?" 사용자는 연령에 따라, 디바이스나 서비스 이해 정도에 따라, 경험의 유무에 따라, 또 디자인의 전달력에 따라 이해의 정도가 다르기 때문에 공급자의 의도를 당연하게 알아줄 수 없어요. 2. "어려울 수도 있긴 한데 일단은" 내 안의 공급자적 자아가 사실은 쉽게 풀어내지 못한 디자인임을 스스로도 알고 있지만 이 정도에서 타협하고 싶을 때 나오게되는 말이에요. 3. "원래.. [UI]한 개만 선택해야 할때? 라디오(Radio) or 선택박스(Select Element) 종종 홈페이지를 제작하다보면 고민되는 지점들이 생긴다. 이번 페이지에서는 한 개만 선택하는 상황에서 어떤 User Interface를 사용할 것이지 대한 저만에 생각을 공유해봅니다. 라디오(Radio) 버튼 1. 선택이 한개 일 때 2. 보여줘야 하는 옵션의 수가 적을 때 (보통 5개 기준) 3. 옵션의 수가 적고 글을 많을 떄 Select Element(DropDown) 1. 디폴트 값을 주고 싶지 않을 때 2. 옵션의 개수가 상당히 많아 공간 활용이 필요할 때 그럼에도 불구하고 많은 전반적인 문맥을 읽을 수 있어야 한다고 생각합니다. 라디오버튼은 클릭수는 낮지만 옵션이 많어지거나 특정 정보를 기본값으로 하고 있습니다. 반대로 셀렉트 요소는 빠르게 옵션을 확인할 수 없어 클릭수가 높아진다는 단점이 있습.. [UX] 탭(tab)이냐 페이지냐 탭을 사용하는 이유는 사용자가 페이지에서 빠르게 1) '내가 원하는 정보를 습득할 수 있느냐'와 2) '이 페이지의 정보를 한 번에 인쇄 가능하냐'이다. Tab의 정의From material Design Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. 탭은 동일한 수준의 계층에서 구룹간의 탐색을 구성하고 허용한다. 1번의 관점으로는 탭은 글의 구조상 소제목처럼 사용하는 것이다. 빠르게 정보를 소비하는 시대에서 사람들의 스캔 능력을 높여주는 역할을 한다. 2번의 관점으로는 집중도와 연결된다. 글을 혹은 필요한 정보를 읽고 있는데 갑자기 내용이 끊긴다면 .. 이전 1 다음
