더 자세히 살펴보기 전에 잠깐 멈춰 우리 팀이 어떤 상황이었는지 생각해보자. 2004년 이래로 콘텐츠 이용자를 위한 전반적인 레이아웃은 바뀌지 않았다. 하지만 인터페이스는 미세하게 수백번 바뀌었는데, 탈중앙된 방식으로 300개 언어 버전의 위키피디아에 적용되었었다. 이는 우리 커뮤니티의 자원봉사자들이 민주주의로 바꾼 결과이다. 그리고 12명정도 되는 우리 팀은 중앙화된 방식으로 변화를 만들고 싶었다. 또한 우리는 인터페이스를 위한 포괄적이면서 디테일한 분석이 없었기 때문에 (여전히 없지만), 어떻게 사람들이 사용하고 있는지 데이터 또한 없었다. 로그아웃된 상태의 사람들을 상대로 A/B 테스트할 능력 또한 없었고. 이 업무는 순전히 수많은 언어에 대응된 위키피디아의 수정을 하나하나 아는 것이었지만, 이는 너무 벅찼다. 한 명이 홀로 수천명의 커뮤니티 자원봉사자와 깊은 관계를 맺고 그들의 일하는 방식을 알고 왜 그들이 특정 수정을 했는지 알아내야 했다. 이러한 민주주의 시스템에 너무나 큰 신세를 졌지만, 이는 또한 이런 맥락엔 포함되지 않았지만 불편함을 느끼는 수억의 콘텐츠 이용자들의 니즈 또한 반영해야한다는 뜻이다. 그러나 우리는 유저테스트닷컴 등엔 한정된 크레딧밖엔 없었다.
Before we go any further let’s pause and think about the situation our team was in. The general layout for readers hadn’t changed much since 2004, but the interface (or interfaces) had changed in hundreds of little, decentralized ways, spread across 300 different language versions of Wikipedia, that were each democratically controlled by their own community of volunteers. And we, a team of ~12 people, wanted to make a bunch of centralized changes to it. Also we didn’t (and still don’t) have comprehensive(포괄적인, 종합적인) and detailed analytics for the interface, so we didn’t have much data about how people were using it. Neither did/do we have the ability to easily run A/B tests with logged-out people. The sheer(순전한, 순수한) task of learning about all of the different local modifications of Wikipedias across various languages was daunting.(벅찬, 주눅들게 하는) Let alone deeply engaging with thousands of volunteers spread across these communities to learn more about their workflows, and why they had made certain modifications. While ultimately being beholden to(~에게 신세를 지다) the democratic system, within which we had to represent the needs of the billions of readers who were/are inconveniently absent from the whole conversation. But we had unlimited credits on usertesting.com, so that was something.
Getting started 시작하기
프로덕트 매니저였던 올가와 나는 몇가지 목표를 또렷하게 정해뒀다. (대부분의 목표들이 그렇듯 보통 연결되어 있거나 오버랩 되어있다) :
- 웹사이트를 친숙하게 만들고, 누구든 방문했을 때 환대받는 느낌이 들게 하자. (특히 아직 위키피디아를 발견하지 못한 어린 사람들)
- 읽고, 긴 아티클을 탐색하고, 지식을 발견하는 경험을 개선시키자.
- 여러 니즈에 더 잘 적응하자. (읽기 vs. 편집하기)
- 미래의 기능을 고려해 더 조정하기 쉬운 인터페이스를 개발하자.
또한 올가는 모니터를 위한 주요 측정 기준을 뽑아냈다: 페이지 뷰, 편집 비율, 계정 생성, 세션 길이.
직감, 인터뷰, 리서치, 팀 미팅, 자원봉사자들이 바꾼 모든 것들을 전체적으로 살펴본 걸 종합하여, 우리는 인터페이스를 위한 우선순위를 만들 수 있었다.
Olga, the product manager, and I started by articulating a few goals (which are interconnected and overlapping, as most sets of goals are):
- Make the website familiar & welcoming to anyone who visits (thinking especially about younger people, in other parts of the world, who have not yet discovered Wikipedia)
- Improve the experience of reading, navigating long articles, and knowledge discovery
- Better accommodate divergent needs (reading vs. editing)
- Develop a more flexible interface, with an eye towards future features
Olga also picked key metrics to monitor: pageviews, edit rates, account creation, and session length.
With a mix of intuition, interviews, research, team meetings, looking at all of the stuff volunteers had modified (including proposals that never got built, and cool Wikipedia plugins), and reading tarot cards, we started to establish a sense of priorities for the interface:
Hierarchy of needs / interface priorities
몇년에 걸쳐 인터페이스는 편집자의 니즈에 맞춰 조금씩 장비들을 갖춰왔다. 어떤 부분에선 이는 합리적이다. 편집자들은 위키피디아의 생태계에서 가장 중요한 부분이다. 그들 없이는 백과사전이 될 수 없다. 그리고 동시에, 99%의 사람들은 편집하지 않고 그저 콘텐츠를 읽는다. 혼재된 두가지 니즈 -- 읽기와 편집하기 사이에서 균형을 맞추는 건 어렵다. 특히 읽는 사람들이 편집자가 되는 플로우를 유지하고 싶은 우리 입장에선 더더욱. 콘텐츠 왼편의 사이드바가 이런 긴장상태를 잘 대변하는 좋은 예다. 편집자들을 위해 이 사이드바엔 중요한 툴들이 배치되어 있어 한 세션에 여러번 사용될 수 있다. 그러나 콘텐츠를 읽는 사람 입장에선 이는 어수선함이었다. 거의 상호작용하지 않는 링크들의 메뉴같은 느낌이었을 거다. 그리고 여전히, 몇 링크는 위키피디아의 "비하인드 씬"으로 연결해주는 역할을 수행함에도 말이다: 궁금한 누군가들은 따라 들어가 위키피디아가 어떻게 작동하는지, 더 알 수 있을 만한 무대의 커튼 뒷편과 같은.
우리는 콘텐츠 이용자들에겐 콘텐츠에 집중할 수 있도록 이런 링크가 덜 눈에 띄게 만들 수도 있었을 것이다. 그러나 결국 편집자가 될 가능성이 충분한 몇몇 사람들이 비하인드 씬을 찾을만한 길을 발견하지 못한다면? 우리의 인식은 이러했다: 잡동사니들을 최대한 정리하고 최소화해 우리의 의도를 조금 더 잘 드러내는 것이다. 궁금증 많은 사람들을 공략하기 위해선 사이드바를 너저분하게 만들어 마구잡이로 접근하기 보다 씬의 뒷편으로 가는 확실한 길을 몇몇개만 제공하는 것이 낫겠다 판단했다. 그래서 우리가 지원해야 하는 사람들의 서로 다른 니즈를 아래 두 그림을 메타포 삼아 표현하기 시작했다:
Over the years the interface had become geared more and more towards the needs of editors. In some ways this made sense. Editors are the most critical part of the Wikipedia ecosystem; without them there would be no encyclopedia. At the same time over 99% of people using the website don’t edit. Balancing the divergent needs of readers and editors is difficult, especially given that we wanted to maintain a path for readers to become editors. The sidebar menu, which sat to the left of the content, is a good example of this tension. For editors it contains critical tools, some of which they use multiple times in a given session. For readers it was clutter; a menu of links that they very rarely interacted with (data). And yet, some of the links might serve as paths to “behind the scenes” parts of Wikipedia; little trails(자국, 끌다, 느릿느릿 걷다) into the fray(천이 해어지다, 싸움, 날카로워지다) that the curious few might follow to learn more about how Wikipedia works.
We could make those links less prominent(중요한, 두드러진) for readers, allowing them to more easily focus on the content. But what if, as a result, those curious few were no longer able to find their way behind the scenes (and eventually become editors)? Our perspective on that was: organizing and minimizing the clutter allows us to accentuate(강조하다, 두드러지게 하다) things in a more intentional manner. It’s better to provide people with a few clear pathways behind the scenes (like the Talk, Edit, and History links), rather than having a scattershot approach, which might catch a random curious person here or there. I started to use these two images as a metaphor for the different needs we were trying to support:
Photos by Nicola Nuttall (left), Devin Berko (right)
솔직히 디자인 작업에 있어서 이런 디테일은 매우 흥미롭거나 특이하건 아니다. 목업, 최고의 노력과 접근성 가이드라인, 프로토타입, 디자인 리뷰, 유저 테스트 같은 것들 말이다. 몇달에 걸쳐 우리는 이런 일들을 자원봉사자들의 도움과 함께 조금씩 해나갔다. 나는 여러 언어 버전의 위키피디아를 보는 데 시간을 꽤 오래 썼다. 특정 커뮤니티에 접근해 그들이 로컬로 수정해둔 것들과의 갈등을 최소화하는 방법을 얻기도 했다.
러프한 니즈 피라미드/우선순위는 주요 항목들을 어떻게 배치할 건지 가이드 해줬고, 미래를 탐구하는 과정의 근거들을 만들어줬다. 그 결과는 아래와 같다:
Many details of the design work from that point onwards honestly aren’t very interesting or unique. Mockups, best practices & accessibility guidelines, prototypes, design reviews, user testing, and the like. Month by month we plodded along(터벅터벅 걷다, 느릿느릿 해나가다), with the help of all of the volunteers (thanks TheDJ, Theklan, Sdkb, and so many others). I spent a lot of time looking at all of the different language-versions of Wikipedia, reaching out to specific communities, and figuring out how to design things in a way that conflicted as little as possible with their local modifications.
The rough pyramid/prioritization of needs guided the placement of the main elements, and grounded all future explorations. The result was more or less this:
우리가 작업했던 시퀀스는 :
- 줄의 길이를 제한하고,사이드바를 닫을 수 있게 했으며, 로고와 사이트 헤더를 재가공했다.
- 검색 기능을 옮기고 개선했다.
- 언어 바꾸기 기능 위치를 옮겼다.
- 개인 계정 관리 기능을 다시 만들었다.
- 스티키 헤더 개념을 도입했다. (현재는 로그인된 경우에만)
- 콘텐츠 목록을 옮기고 개선했다.
- 페이지 툴 메뉴를 옮겼다.
- 글로벌 네비게이션 메뉴(한쪽에 붙어서 전체 탐색하는 메뉴 리스트)를 다시 만들었다.
그러나 디자인 프로세스엔 특이한 부분이 몇 있었는데, 이는 우리가 다루고 있는 더 넓은 조직과 방향에서 오는 특이한 제한들을 반영하는 것이었다.
The sequence of what we worked on was:
- Limiting the line-length, making the sidebar collapsible, and reformatting the logo/site header
- Moving and improving search
- Moving the language switcher
- Reformatting the personal tools (i.e. Your account)
- Introducing a sticky header (logged-in only, currently)
- Moving and improving the table of contents
- Moving the page tools menu
- Reformatting the global navigation menu
There were, however, a few unique aspects to the design process, which more or less reflect the unique constraints that we deal with as an organization and movement more broadly.
