인터랙션 디자인의 개발 역사를 통틀어 혁신적인 인터랙션 모델이 널리 수용되어 표준이 되면서 오래된 인터랙션 모델이 지속적으로 제거되는 역사입니다. 따라서 상호작용 모델의 개발은 '자연선택, 적자생존'의 과정이기도 하다. 이 글은 2009년 탄산음료 컨퍼런스에서 공유한 글입니다. 당시 혁신적이었던 것이 지금은 널리 사용되고 있습니다. 주제는 혁신을 장려하려는 현재 UX 플랫폼의 목표와 일치하므로 다시 게시하겠습니다 :)
인터랙션 디자인은 창의적인 작업이며 혁신적인 방법을 사용하여 제품 문제를 아름답게 해결하는 것은 인터랙션 디자이너의 가치를 반영합니다. 혁신적인 인터랙션 디자인이 사용자에게 인정받고 업계 동료들로부터 배울 때, 그것은 직업적으로 큰 만족감을 줍니다. 이러한 종류의 혁신이 반드시 획기적인 디자인은 아닙니다. 작은 대화형 구성 요소의 혁신이 제품 경험에 많은 것을 추가할 수 있습니다. 오늘은 몇 가지 사례를 통해 인터랙티브 컴포넌트를 혁신하는 네 가지 일반적인 방법에 대해 이야기하고 모두를 격려하겠습니다.
1. 스크롤바의 혁신 [재구축 방식]
먼저 PDF 문서를 읽는 두 가지 스크롤 방법을 기억해 보겠습니다. 1. 손 도구를 사용하여 드래그 2. 스크롤 막대.
다음 정보를 보려면 손 도구를 사용하여 위쪽으로 드래그하고 스크롤 막대를 사용하여 아래쪽으로 드래그합니다. 두 가지 작동 방법의 원리는 무엇입니까?
문서를 보이는 영역 A와 전체 영역 B로 나눕니다. 스크롤 막대 슬라이더는 문서의 표시 영역 A에 해당합니다. 따라서 스크롤바는 시각적 영역 A를 드래그하고, 손 도구는 전체 영역 B를 드래그합니다. 두 가지 조작 방법으로 드래그하는 대상이 다르기 때문에 방향이 정반대입니다.
스크롤 막대는 문서의 세로 방향 축소판으로 이해될 수 있으며, 슬라이더는 가시 영역의 현재 위치와 전체 영역에 대한 가시 영역의 비율을 나타낼 수 있습니다. 문서의 전체 영역이 계속 증가함에 따라 보이는 영역의 비율이 작아지기 때문에 슬라이더의 높이도 점점 작아집니다. IE, FF, Office 등과 같은 일반 소프트웨어에 대한 통계에 따르면 일반적으로 높이가 8px에 도달하면 슬라이더가 더 이상 줄어들지 않습니다. 슬라이더 높이가 8px에 불과하면 스크롤 막대의 드래그 환경이 상당히 좋지 않습니다.
Google Wave는 스크롤 막대에 과감한 혁신을 가져왔습니다.
1. 위쪽 및 아래쪽 버튼이 슬라이더와 연결됩니다. (이점: 슬라이더에서 위쪽 및 아래쪽 버튼까지 마우스 이동 거리가 짧아집니다. 문제: 위쪽 및 아래쪽 버튼을 클릭하면 슬라이더가 움직임을 따라갈 수 없습니다.)
2. 스크롤바의 슬라이더 높이가 고정됨(장점: 슬라이더가 너무 작은 문제 해결, 문제: 가시 영역의 비율을 표현할 수 없음)
이러한 두 가지 수정 사항은 기존 스크롤 막대의 문제를 최적화하지만 스크롤 막대의 기본 속성("위치" 및 "비율")에 문제를 일으킵니다. 발생한 새로운 문제를 해결하기 위해 Google Wave의 스크롤 막대에는 두 가지 새로운 요소가 도입되었습니다.
1. 반투명 회색 블록(위 및 아래 버튼을 클릭하면 슬라이더가 움직임을 따라갈 수 없으며 반투명 회색 블록이 이동합니다. 위치 문제 해결)
2. 종료 막대(파동의 내용이 계속 증가하고 종료 막대의 위치가 아래쪽으로 계속 유지되며 이는 콘텐츠의 전체 높이를 나타내는 데 사용됩니다. - 비율 문제를 해결합니다. 불행하게도 이것의 시각적 효과는 종료 표시줄은 사람들이 드래그할 수 있다고 생각하게 만들어 쉽게 혼란을 야기할 수 있습니다.
Google Wave는 스크롤바를 혁신하기 위해 많은 노력을 기울였으나 스크롤바의 복잡성으로 인해 사용자 습관에 문제가 발생하기도 했습니다. 개인적으로 이러한 스크롤바 혁신은 제품의 필요에 따라 이루어진 것이라고 생각합니다. 웨이브 페이지에는 동시에 4개의 스크롤바가 있을 수 있습니다. 한 페이지에 4개의 전통적인 스크롤바가 동시에 나타나면 그 효과를 상상할 수 있습니다. Wave 스크롤 막대는 시각적으로나 대화식으로 매우 "가벼운" 디자인이며 제품 전체에 매우 적합합니다.
================================================= ==
스크롤 막대에 대한 Apple의 개선 사항은 간단하고 효과적입니다. 앵커 포인트를 추가하는 것입니다.
Mac 공식 웹사이트: 앵커 포인트 수평 스크롤 막대를 추가하고 앵커 포인트를 클릭하면 슬라이더가 해당 위치로 스크롤됩니다.
iPhone 음악 앨범 목록: 앵커 포인트가 있는 스크롤 막대, 문자를 탭하고 목록을 해당 위치로 스크롤한 다음 스크롤 막대에 앵커 포인트를 추가하여 탐색 및 정확한 위치 지정 기능을 추가하여 사용하기 더 쉽게 만듭니다.
2. 통합검색창의 혁신 [결합방식]
일반적인 조건부 검색 상자는 "입력 상자 + 드롭다운 메뉴 + 버튼"의 세 가지 컨트롤로 구성됩니다. 컨트롤을 적절하게 조합하면 더 나은 결과를 얻을 수 있습니다.
1. [입력 상자 + 드롭다운 메뉴] 조합
Sina Weibo의 검색창은 드롭다운 옵션을 입력 상자 프롬프트에 통합하여 검색 범위 선택 작업을 더욱 편리하게 만듭니다.
Google 리더와 같은 입력 작업이 포함된 드롭다운 메뉴를 사용하면 드롭다운 메뉴를 더 쉽게 사용할 수 있습니다. (이러한 종류의 제어 조합은 단어, 포토샵 및 글꼴 선택 제어와 같은 기타 소프트웨어에서 매우 일반적입니다)
2. [버튼 + 드롭다운 메뉴] 조합
Douban과 Flickr의 검색 버튼 뒤에 드롭다운 화살표가 추가되었으며, 버튼과 드롭다운 선택 작업이 하나로 결합되었습니다. 전체 사이트에서 볼 때 디자인이 약간 갑작스럽습니다.) )
3. 파일업로드 구성요소 혁신 [슬리밍 방식]
표준 파일 업로드 구성 요소는 "입력 상자(의사) + 찾아보기 버튼 + 제출 버튼"으로 구성됩니다. 파일 경로 표시를 주로 담당하기 때문에 "의사 입력 상자"라고 합니다. 따라서 Firefox에서 이 입력 상자를 클릭하면 파일 선택 작업이 시작됩니다. Chrome은 최종 제어 기능을 복원하기 위해 의사 입력 상자를 버튼으로 변환하기도 했습니다. 원래 역할.
표준 파일 업로드 구성 요소를 사용할 때 두 개의 제출 버튼이 자주 나타납니다. 위 그림을 예로 들면 가장 일반적인 오작동은 파일을 선택한 후 "아바타 설정 저장"을 직접 클릭하는 것입니다.
Gmail 첨부 파일 업로드 디자인은 파일 업로드 구성 요소에서 두 가지 슬리밍 작업을 거쳤습니다.
과거에 Gmail에 첨부파일을 업로드하는 단계는 다음과 같습니다. 1. "첨부파일 추가"를 클릭합니다(클릭하면 제출 버튼이 없는 업로드 구성요소가 나타납니다). 2. 파일을 선택합니다(선택 후 업로드가 자동으로 시작됩니다). 제출 버튼을 제거했습니다.
Gmail에 첨부 파일을 업로드하는 현재 단계는 다음과 같습니다. 1. "첨부 파일 추가"를 클릭합니다. 클릭하면 업로드가 자동으로 시작되고 업로드 진행률 표시줄이 나타납니다. 입력 상자와 제출 버튼이 제거되고 찾아보기 버튼만 남았으며 업로드는 한 번의 클릭만으로 가능합니다.
4. 페이지 넘기기 혁신 [대체 방법]
전통적인 페이지 넘기기 방식은 "이전 페이지 + 페이지 번호 + 다음 페이지"로, 가장 친숙한 디자인입니다.
Bing 이미지 검색
구글 리더
사진을 보고 최근 몇 년 동안 등장한 페이지 넘기기 방식인 "이전 페이지 + 페이지 번호 + 다음 페이지" 대신 스크롤 바를 맨 아래로 끌어서 다음 콘텐츠 로딩을 시작하는 이 "무한 스크롤" 페이지 전환 방식을 구입하세요. 모래밭.
상대적으로 말하자면, 트위터나 아이폰 앱 스토어와 같은 "프로그레시브 페이지 넘기기"는 그다지 급진적이지 않습니다. 이는 전통적인 페이지 넘기기와 끝없는 스크롤 페이지 넘기기 사이의 절충안입니다.
위 그림은 Google 도서 검색의 기발한 페이지 넘김 디자인입니다. 문서 하단의 특정 영역(약 50px 높이) 위에 마우스를 올리면 반투명 레이어가 나타납니다. 페이지 넘김을 시작하려면 이 레이어를 클릭하세요. . 이 거대한 보조 페이지 넘기기 버튼은 페이지 넘기기의 편의성을 크게 향상시키며 인터페이스에 거의 영향을 주지 않습니다.
여기서 언급한 페이지 넘기기 구성 요소 혁신은 기존의 페이지 넘기기 구성 요소를 새로운 페이지 넘기기 방식으로 대체하는 것입니다. 정보 구조의 관점에서 볼 때 전통적인 페이지 넘김은 정보를 세그먼트로 나누는 반면 "끝없는 스크롤 페이지 넘김"은 정보 스크롤에 속합니다. 이 두 가지 방법은 실생활의 원형, 즉 책과 영화에 해당합니다. 책은 정보를 각 페이지로 나누어 뒤집는 반면, 영화 필름의 정보는 프레임별로 스크롤됩니다.
정보 흐름 속도와 페이지 넘김 편리성 측면에서 볼 때 '정보 스크롤'은 '정보 분할'보다 훨씬 뛰어납니다. 이 두 가지 페이지 넘김 방법 중에서 어떻게 선택해야 할까요? 이는 후속 콘텐츠에 대한 사용자의 요구에 따라 달라져야 한다고 생각합니다. Google 검색 결과 페이지와 같이 페이지가 진행됨에 따라 정보의 품질이 저하되는 경우, 사용자의 페이지 넘김 요구가 있습니다. 그렇게 강하지 않습니다. Google 리더와 같이 정보 품질에 따라 분류되지 않는 시나리오에서는 고속 페이지 넘기기 방법을 제공하는 것이 상대적으로 필요합니다. 스크롤링은 정확한 콘텐츠 위치 지정 및 정보 검색에 도움이 되지 않는다는 점에 유의해야 합니다.
정보 흐름의 속도는 정보를 받는 사람의 사고방식에 큰 영향을 미칩니다. 흐름 속도가 빠를수록 흡수되는 정보의 양은 적어집니다. 따라서 PDF 문서를 읽는 것은 종이책을 읽는 것보다 더 조급함을 느끼게 합니다. 페이지를 넘기는 것 외에는 "읽기" 대신 "스캔"하고 있습니다(개인적인 주관적인 감정, 모든 유사성은 순전히 불가피합니다).
이는 또한 정보를 구조화하는 것 외에도 상호 작용 디자이너의 업무 책임이 정보의 흐름 속도와 공급을 제어해야 한다는 점까지 확장됩니다.
요약
마지막으로, 대화형 구성 요소를 혁신하는 네 가지 방법을 요약하는 데 그림이 사용됩니다. 이 그림이 모든 사람에게 영감을 주기를 바랍니다.