초대 제공하기
초대 제공하기 (Provide an Invitation)
드래그 앤 드롭, 인라인 편집, 맥락 도구 같은 풍부한 상호작용들이 공통적으로 겪는 문제는 발견 가능성(discoverability)이 부족하다는 거예요. 사용자에게 초대(invitation)를 제공하는 것은 성공적인 상호작용 인터페이스의 핵심 중 하나예요.
출처: 문서
본문
초대는 사용자를 상호작용으로 이끄는 프롬프트와 단서(cue)예요. 여기에는 인터페이스에서 다음에 무슨 일이 일어날지 암시해 주는 적시적(just-in-time) 팁이나 시각적 어포던스(affordance)가 자주 포함돼요.
시그니파이어(Signifiers) 는 신호이자 커뮤니케이션 장치예요. 이 표시들은 가능한 행동, 무엇을 해야 하는지, 어디서 해야 하는지를 알려 줘요. 시그니파이어는 종종 보이거나, 들리거나, 촉각으로 느껴져요. — 《The Design of Everyday Things》에서
어포던스(Affordances) 는 객체와 실체(가장 흔히는 사람) 사이의 관계(즉, 가능한 행동)예요. 어포던스의 존재는 객체의 속성과 상호작용하는 실체의 능력에 의해 결정돼요. — 《The Design of Everyday Things》에서
정적 초대 (Static Invitations)
페이지에 상호작용 단서를 직접 배치하면, 기대되는 인터페이스 동작을 사용자에게 정적으로 안내할 수 있어요. 정적 초대는 단서를 페이지에 직접 제공해요.
행동 유도(Call to Action) 초대는 일반적으로 페이지의 정적 안내로 제공돼요. 하지만 시각적으로는 텍스트 초대, 빈 슬레이트(Blank Slate) 초대, 미완성(Unfinished) 초대 등 다양한 방식으로 제공될 수 있어요.
투어 초대는 웹 애플리케이션의 디자인 변경, 특히 잘 설계된 인터페이스의 변경을 설명하는 좋은 방법이 될 수 있어요. 하지만 투어를 제공한다고 해서 인터페이스가 상호작용 중 가질 수 있는 실제 문제가 해결되는 것은 아니에요.
투어 초대는 짧고 단순하게, 쉽게 나갈 수 있고, 재시작하기 명확하게 만들어 주세요.
동적 초대 (Dynamic Invitations)
동적 초대는 상호작용 지점에서 사용자를 참여시키고 상호작용의 다음 단계로 안내해요.
카드 전체에 마우스를 올리는 동안 클릭 가능한 부분이 파란색 하이퍼텍스트로 변해요.
마우스를 올리는 동안 "Select this Template" 버튼이 나타나요.
호버 초대(Hover Invitation): 마우스를 올리는 동안 초대를 제공해요.
추론 초대(Inference Invitation): 상호작용 중 시각적 추론을 사용해, 시스템이 사용자의 의도에 대해 추론한 바를 단서로 알려 줘요.
더 많은 콘텐츠 초대(More Content Invitation): 페이지에 더 많은 콘텐츠가 있음을 나타내요.
좌우 화살표를 사용해 Modal 주변의 더 많은 콘텐츠를 전환해요.