Design notes on the 2023 Wikipedia redesign : 위키피디아 2023 리디자인 (1)

Exploring the unique challenges of making changes within an open-source, volunteer-led environment. Plus: the importance of prototyping.

(소개생략) 안녕, 난 나는 위키미디어 파운데이션에서 독자 웹 팀으로 일하는 사람이다. 독자 웹 팀은 웹에서 읽는 경험을 책임지고, 전체 모바일 웹사이트를 유지하는 역할을 한다. (데스크탑 사이트와 완전히 분리되어있음). 2019년 우리는 PC웹사이트 개선을 위해 작업을 진행했고, 지난 1월에 런칭되었다. 아래는 프로젝트의 진행과정을 간략히 요약한 것이다.

Hey, I’m Alex Hollender. For the past 5 years I’ve worked as a UX designer on the Readers Web team at the Wikimedia Foundation. Each designer at the foundation is part of a product team, and focuses on a different experience/platform (for example: there’s an Apps team that works on the iOS and Android apps, an Editing team that works on editing tools, a Language teamthat works on language support & translation tools, and several others). The Readers Web team is responsible for the reading experience on the web, and for maintaining the entire mobile website (which is actually separate from the desktop site). In 2019 we began to work on a series of improvements to the desktop website, which launched this past January. Below are my notes on the project and process.

 

2004–2019

이야기를 잘 이해하기 위해, 예전으로 잠시 돌아가보자. 2004년, 위키피디아의 인터페이스가 매우 크게 변화했었다. 마크 주커버그가 TheFacebook을 런칭했고, 지메일이 출시되었으며, 스마트폰이라는 것이 없었던 시절이었다. (첫 아이폰은 그로부터 3년 뒤 나왔다.) 또한 CSS에도 제한이 꽤 많았고, 웹사이트들은 지금보다 훨씬 심플한 형태였다. 두 유명한 컴퓨터는 델의 디멘션 2400 데스크탑과 Latitude D505라는 랩탑이었다. 대부분 이 두 종류의 컴퓨터를 사용했기 때문에, 위키피디아는 이렇게 보였을 것이다:

We have to go back in time a little to properly frame this story. Back to 2004, which was the last time Wikipedia’s interface changed significantly. Mark Zuckerberg had just launched TheFacebook, Gmail had just come out, and there were no smartphones (the first iPhone would come out 3 years later). Also CSS was much more limited, so websites were more simple. Two popular computers were Dell’s Dimension 2400 desktop, and their Latitude D505 laptop. For almost everyone using it, Wikipedia looked like this:

2010년, 새 에디터들을 위해 위키피디아의 사용성을 개선하려고 이런저런 변화가 시도됐었다. 그리고 2015년 에디팅 경험은 압도적으로 개선됐는데, 바로 '비주얼 에디터' 덕분이었다. 그러나 일반적인 레이아웃, 특히 읽는 경험은 2004년의 업데이트와 비교해서 크게 달라지지 않았다. 2019년까지 말이다.

In 2010, a bunch of changes were made to increase the usability of Wikipedia for new editors (notes), and in 2015 the editing experience was again significantly improved with the introduction of the Visual Editor. However, the general layout, and specifically the reading experience, stayed largely the same between the 2004 update, and 2019, where this story begins.

 

그러나 컴퓨터는 2004년부터 2019년까지 많이 변해왔다. 즉, 스크린은 점점 작아지고, 또 커졌다. 또 우리 팀이 작은 스크린에 대응해 모바일 사이트를 만드는 동안, 우리는 더 거대해지고 있는 데스크탑과 랩탑에 대응해 아무것도 개선시키고 있지 않았다.

However computers changed a lot between 2004 and 2019. Namely, screens got a lot smaller, and a lot larger. And while our team had built a mobile site to accommodate smaller screens, we hadn’t really done anything to improve the website for the growing desktop and laptop screens:

Wikipedia on larger screens in 2019

 

다른 말로, 위키피디아 : 거대한 유산과도 같은 웹사이트 (10년이 넘는 동안 10위 안의 웹사이트 자리를 지킨)는 15년이 넘도록 같은 인터페이스를 고수했다. 그리고 어느날 CPO가 우리 팀으로 오더니, (우리 팀은 1명의 프로덕트 매니저와 6명의 개발자, 1명의 QA, 1/2명의 스크럼 마스터, 1/2명의 데이터 분석가, 1/2명의 커뮤니티 연락 담당자, 그리고 나로 이루어져있다.) 우리에게 거대한 개선을 요구했다. 이는 인터넷 역사를 통틀어 단-한번-일어날 역사와도 같은 순간이었다. 너무나 재밌지만, 어렵기도 했다.

뾰족한 단 하나의 이유는 없지만, 2019년 이 모든 것이 일어났다. 대신 다양한 이유들이 존재했다 : 텍스트 길이의 제한이 없었고, 검색 박스가 작았으며 익숙하지 않은 곳에 위치해 있었고, 표는 오직 페이지의 최상단에만 존재할 수 있었으며, 언어 변경은 숨겨져 있었다. 요소들의 위계와 정돈은 몇몇 곳에서 혼란을 야기했다. 프론트엔드는 죄다 부서지기 마련이었고, 새로운 기능을 두기 위한 공간을 찾기도 어려운 것 등등... 이런 이유 들이 있었다. 그러나 아마 위의 모든 것들은 우리가 인터페이스를 무시해왔다는 사실에서 야기되었을 것이다. (다른 우선순위와 제한된 리소스 때문에) 만약 우리가 이 기한 지난 것에 주의를 좀 기울이기만 하면 사용자와 에디터 둘 다에게 좋은 경험을 줄 수 있을 거라는 사실에 고무되었다.

2004년부터 2019년동안, 위키피디아 자원봉사자 커뮤니티는 위키피디아의 몇 특정 버전에 로컬라이징 하는 개선으로 매우 바빴다. 이는 위키피디아가 민주적으로 운영되며, 오픈 소스 웹사이트고 누구에 의해서든지 바뀔 수 있는 인터페이스를 가졌기 때문에 가능한 일이었다. 그들이 변화를 만들었고. 그러나 그동안 이 변화들이 진정한 개선이었을지라도, 대부분은 로그인한 에디터들을 위한 것이었다. 게다가 그 개선안은 중앙집권화 되지도 않았기 때문에 대부분의 위키피디아에선 사용하지 못했다. 약간 메이저는 아닌, 살짝 옆길로 샌 것들 : 많은 사람들이 알만하지 못하고, 위키피디아의 많은 버전이 한데 관리되지 못했다. 당신이 읽고있는 위키피디아(만약 영어, 벵골어, 텔루구-인도 내 사용-어, 키르기스스탄어, 한국어, 페르시아어나 기타 300여개의 언어를 사용한다면)는 실제로는 존재하는 다른 위키피디아 사이트로부터 파편적으로 조합된 웹사이트다. 실제로 그 사이트들은 서로 많은 코드를 공유하고, 같은 서버를 사용한다. 그리고 보편적으로 같은 인터페이스다. 그러나 자원봉사자들이 만든 인터페이스 변화는(물론 콘텐츠도 포함해서) 지역적으로 만들어진다. 이는 한국어 위키피디아에서 사이드바를 접을 수 있는 개선이 이뤄졌다면, 이는 영어 위키피디아(혹은 다른 곳도)에 반영되지 않는다는 뜻이다. 히브리어 위키피디아에서 스티키 헤더를 만들었다고 해서 버마어 위키피디아에 반영되지 않는다는 뜻이고.

때때로 이렇게 중앙집권화 되지 않는다는게 좋은 점도 있다. 예를 들어, 세르비아 언어와 중국어에서 언어 변경 스위처는 다른 위키피디아에선 필요하지 않다. 하지만 전반적으로 봤을 땐, 중앙에서 관리되지 않는다는건 2004년부터 2019년까지 일어난 멋진 인터페이스 변화들이 단순히 몇몇 지역 위키피디아에 국한된다는걸 의미하고, 위키피디아 사용자 중 독자들의 대부분이 이익을 얻을 수 없단 뜻이다. 다른 것들과 마찬가지로 탈중앙화엔 장점도 있고 단점도 있다.

 

In other words, Wikipedia — a major, legacy website (top 10 ranked, for 10+ years) — had an interface that hadn’t been changed for 15 years. And then one day the Chief Product Officer came to our team (1 product manager, ~6 engineers, 1 quality assurance person, ½ a scrum master, ½ a data analyst, ½ a community liaison 연락 담당자, and myself), and tasked us with making significant improvements. It might honestly be a once-in-the-history-of-the-internet kind of situation. Exciting, but rather difficult.

There wasn’t one specific reason why, in 2019, this all came about (though there is arguably one person who got the ball rolling — sup Nirzar). Instead there were a variety of reasons: the line length had no limit, the search box was small and in an unfamiliar place, the table of contents was only available at the top of the page, language switching was hidden, the hierarchy and organization of elements was confusing to some, the front-end was brittle 불안정한, 잘 부러지는, it was becoming difficult to find places for new features, etc. But perhaps above all was the fact that we had been neglecting the interface (due to other priorities, and limited resources), and we felt confident that if we gave it some overdue attention we could make it better for both reader and editors.

Meanwhile, between 2004 and 2019, the Wikipedia volunteer community had been busy making localized improvements to specific versions of Wikipedia. This is possible because Wikipedia is a democratically run, open-source website, with an interface (and back-end) that can be changed by anyone. And change it they do. But while these changes were real improvements, the majority of them were geared towards logged-in editors. Also the improvements had not been centralized, so they weren’t available on most Wikipedias. A slight tangent(탄젠트, 옆길로 새다): unbeknownst to many people, the many versions of Wikipedia are not centralized. The Wikipedia you read (whether it’s English, Bangla, Telugu, Kyrgyz, Korean, Persian, or any of the 300 others), is actually a separate website from all of the other Wikipedias that exist. Sure they share a lot of code, use the same servers, and generally have the same interface. But changes volunteers make to the interface (and the content too, of course) are made locally. This meant that the improvement Korean Wikipedia made to have a collapsible sidebar didn’t carry over to English Wikipedia (or anywhere else), the changes Hebrew Wikipedia made to have a sticky header didn’t carry over to Burmese Wikipedia, and on and on.

Sometimes the lack of centralization makes sense: for example, the language variant switcher on Serbian and Chinese aren’t needed on other Wikipedias. But overall, the lack of centralization meant that a bunch of good interface changes between 2004 and 2019 were localized to smaller Wikipedias, and the majority of Wikipedia readers were not benefitting from them. Like anything else, there are pros and cons to decentralization.

There are over 300 individual instances of Wikipedia