작성자 :Patryk Adaś
2000년대 초반부터 탭 브라우징이라는 데스크탑의 비유가 우리가 웹을 탐색하는 방식을 지배해 왔습니다. Servo의 야간 빌드를 위해 HTML로 구축된 브라우저 사용자 인터페이스를 구축하는 것을 목표로 하는 Mozilla Research 프로젝트인 Browser.html을 통해 우리는 표준 탭 브라우저를 트레일 기반 모델로 발전시키는 실험을 하고 있습니다. .
트레일의 목표는 웹 콘텐츠를 볼 수 있는 창일 뿐만 아니라 사용자 활동에 대한 설명을 구성하는 것입니다. 우리의 작업이 향상하는 도구의 이상적인 상태에 더 가까이 다가가는 데 도움이 되기를 바랍니다. 인지 부하를 증가시키는 것이 아니라 인지 과정을 개선하는 것입니다.
우리가 생각하고 있는 시나리오를 설명하기 위해 우리의 친구 Nala를 소개하겠습니다.
완벽한 피자를 찾아서
Nala는 피자 가게를 정찰하고 있습니다. 그녀는 전통적인 탭 브라우저에서 (1) 검색을 시작합니다. 검색결과 페이지로 이동합니다. (2) .
그녀는 Yelp에 있는 레스토랑 목록 링크를 따라갑니다 (3) , 유망한 피자 가게를 확인하세요 (4) .
Yelp의 외부 링크는 별도의 탭에서 열리므로 Nala가 레스토랑 웹사이트 링크를 클릭하면 새 탭이 시작됩니다(5) .
새 탭에는 기록이 없으며 첫 번째 탭과의 연결도 없습니다. Nala가 레스토랑 웹사이트에 어떻게 접속했는지에 대한 모든 기록이 손실됩니다!
더 많은 옵션을 살펴보느라 브라우저의 기억상실증이 가중되었습니다. 첫 번째 탭으로 다시 전환 (6) 그리고 Yelp 결과로 다시 이동합니다(7) , 그녀는 다른 레스토랑을 찾습니다.
이제 그녀가 새 레스토랑을 선택할 때 (8) , 현재 탭 탐색 기록의 일부도 손실됩니다:
다음 레스토랑 웹사이트에 대한 외부 링크를 다시 클릭하면 새 탭이 열립니다(9) , 그리고 다시 이전 기록과의 연결을 끊습니다.
Nala는 초기 검색결과의 결과를 다시 보기 위해 첫 번째 탭의 기록에서 몇 단계 뒤로 돌아가 그곳에서 바로 다른 피자 가게를 엽니다(10) .
일반적인 검색 시나리오의 이 예에서는 기록의 1/3 이상이 손실됩니다!
물론 브라우저는 일반적으로 기록 보기 및 '최근 탭' 메뉴와 같은 도구를 제공하지만 이들 중 어느 것도 Nala가 따라온 실제 과정과 일치하는 설명을 제공하지 않습니다.
탭에서 트레일까지
Browser.html을 사용하여 우리는 탭 브라우저가 보존하는 Nala 역사의 단편뿐만 아니라 (버전 1)을 알려주는 사용자 인터페이스의 프로토타입을 만들고 있습니다. , 하지만 모두 (버전 2) :
그러나 이 나무들은 쉽게 복잡해질 수 있습니다. 우리가 가장 중요하게 생각하는 것은 각 탐색이 어디에서 갈라지는가가 아니라 결과로 이어지는 전체 경로입니다. 이것이 바로 사용자에게 표시되는 내용입니다. (버전 3) :
각 행은 탐색 트리 루트에서 결과까지의 경로를 나타냅니다. 장점은 트레일이 왼쪽에서 오른쪽으로 독립적인 이야기를 전달한다는 것입니다. 반면, 복제물은 주의를 산만하게 하는 시각적 노이즈를 많이 발생시킵니다. 다행히도 하나의 트레일에 집중하고 다른 트레일을 접어서 이러한 문제를 제거할 수 있습니다.
Nala가 실제로 본 것은 다음과 같습니다:
탭과 트레일:동일하지만 다릅니다.
탐색한 각 주제로 이어지는 경로를 무시하면 트레일은 기존 탭과 다르지 않습니다. 이는 의도적인 것입니다. 우리의 목표는 기존 사용자 경험을 대체하는 것이 아니라 향상시키는 것입니다. 사용자는 예전처럼 브라우저를 계속 사용할 수 있습니다. 하지만 각 탐색 트레일은 처음부터 끝까지 전체 내용을 알려주는 탭입니다. 이를 통해 우리는 사용자 경험을 더욱 향상시킬 수 있는 기회를 얻게 됩니다. 우리가 고려하고 있는 몇 가지 사항은 다음과 같습니다:
- URL뿐만 아니라 전체 추적을 공유합니다.
- 관련성이 없어진 트레일이 사라지고 결국 그리드 밖으로 이동합니다.
- 방문 중 있었던 형태로 트레일을 유지하여 다시 방문할 수 있습니다(오프라인).
- 사용자가 주제를 조사하는 동안 자신의 생각을 기록할 수 있도록 트레일 주석을 허용합니다.
- 공동 주제 연구
- 선택적으로 새 트레일에서 페이지를 엽니다.
트레일로 가는 길
웹을 통한 사용자의 여정을 흔적으로 시각화한다는 아이디어는 결코 새로운 것이 아닙니다. 심지어 70년 전, Vannevar Bush는 하이퍼링크 데이터 아이디어를 대중화한 획기적인 As We May Think 에세이에서 "memex 기계"를 설명했습니다. 그는 이 기계가 개인 도서관을 통해 데이터를 수집하고 공유하여 연구 과정의 흔적을 남기는 데 도움이 될 것이라고 생각했습니다.
그 이후로 Xerox Trails의 Trailmeme을 시작으로 이러한 도구를 만들려는 여러 시도가 있었습니다. 이 개념은 2004년 MacWarriors의 Trailblazer에 의해 이어졌고 현재 Trailblazer.io가 그 뒤를 따르고 있습니다. 트레일의 아이디어를 친숙한 탭 관용구에 연결함으로써 기존 워크플로우를 기반으로 아이디어를 널리 매력적으로 만들 수 있기를 바랍니다. 그리고 Browser.html은 이러한 아이디어를 위한 훌륭한 테스트베드 역할을 합니다.
공간 모델
다양한 사용자 인터랙션과 애니메이션을 통해 공간 모델을 작업하고 있습니다. 이는 사용자가 무슨 일이 일어나고 있는지, 그리고 가장 효과적으로 웹을 탐색하는 방법을 더 잘 이해하는 데 도움이 될 것입니다.
이에 대한 자세한 내용은 여기에서 읽어보실 수 있습니다.
우리와 함께하세요!
우리는 현재 첫 번째 실제 프로토타입을 제작하는 중입니다. 재미있을 것 같으면 Browser.html 프로젝트를 확인해 보세요! GitHub에서 미해결 문제 목록을 확인하거나 Slack에서 채팅을 하실 수 있습니다.
무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요