웹사이트 재설계의 기초 – 사례 연구

웹사이트 재설계 프로젝트를 마치면서 “오늘 내가 아는 것을 알았더라면 다르게 했을 텐데”라는 생각만 하고 끝내는 것은 드문 일이 아닙니다.

우리는 모두 거기에 있었다. 우리는 새로운 프로젝트에 흥분하고, 클라이언트와 농담을 주고받고, 계약에 서명하고, 프로토타입을 조롱하기 시작합니다. 삶은 좋아 보이지만 프로젝트 기반은 흔들리고 있습니다.

필연적으로, 첫 번째 디자인 컨셉이 제시되자마자 수정과 범위 크리프가 스며들기 시작하고 거기에서 내리막길입니다. 의사 소통이 끊기고 계획한 대로 아무 것도 진행되지 않으며 궁극적으로 새로 디자인된 웹 사이트는 당신이 고치기 위해 고용된 괴물과 닮아 있습니다.

세계적 수준의 디자인과 사용자 경험은 멋진 목업으로 시작되지 않습니다. 회사 목표에 초점을 맞춘 전략적 계획과 디자인 비전을 기반으로 합니다. 1차 목표는 "더 예쁜 웹사이트를 만들자"가 될 수 없습니다.

웹사이트 디자이너는 사용자 경험(UX)과 사용자 인터페이스(UI)를 담당합니다. 사용자가 우리가 디자인한 인터페이스와 상호 작용하는 최적의 경험을 갖도록 하는 것이 우리의 임무입니다. 이를 위해서는 프로젝트 개념부터 철저한 계획이 필요합니다.

이 기사에서는 다음 웹사이트 재설계가 견고한 토대 위에 구축되도록 하는 데 도움이 되는 신뢰할 수 있는 프로세스에 대해 간략히 설명합니다.

웹사이트 재설계의 가치 프로젝트 전 조사

프로세스를 보여주기 위해 미국 남서부의 고고학 유적지를 탐험하고 보호하는 비영리 단체인 Archeology Southwest에서 웹사이트 재설계를 완료하는 단계를 살펴보겠습니다.

클라이언트의 분야와 경쟁에 대한 예비 조사 후 사용 가능한 모든 웹사이트 자산을 면밀히 검사하십시오. 이 분석은 별도로 청구되며 프로젝트 견적이 작성되기 전에 발생합니다. 이러한 방식으로 작업하면 웹 디자이너가 나중에 프로젝트에서 표면으로 나타날 수 있는 문제를 설명하려고 할 때 발생하는 모호하거나 부풀려진 추정치를 방지할 수 있습니다.

고고학 사우스웨스트(Archeology Southwest)의 경우 고대 CMS 포털 내부에 산과 콘텐츠가 산재해 있어 주의가 절실히 필요한 사이트에 직면했습니다. 상태가 좋지 않아 질서를 만들기 시작했습니다.

1단계: 콘텐츠에 익숙해지기

집을 리모델링할 때는 철거일 전에 귀중한 자재를 인양하는 것이 중요합니다. 동일한 원칙이 웹사이트 디자인에도 적용됩니다. 사이트를 한 페이지씩 살펴보고 모든 콘텐츠를 꺼내야 합니다. 디자이너로서 우리는 어떤 콘텐츠가 고유한 게시물 유형이 되어야 하고 어떤 페이지가 정적인지 파악해야 합니다.

이 작업이 완료되면 모든 것을 구성하는 방법에 대한 전략을 세우되 어떤 콘텐츠를 남길지, 어떤 콘텐츠를 제거할지 결정하지 마십시오. 왜 안 돼?

실제 비즈니스 및 조직을 다룰 때 사이트의 콘텐츠를 담당하는 다양한 사람들이 있으며 존재하는 콘텐츠의 양은 엄청날 수 있습니다. 가장 좋은 방법은 모든 것을 먼저 분류하는 것입니다.

나는 일반적으로 기본 탐색으로 시작하여 페이지별로 이동합니다. 이렇게 하면 첫 번째 고객 회의 전에 정보 아키텍처와 사이트맵을 다운로드할 수 있습니다.

불행히도 고고학 사우스웨스트의 사이트는 일반적이지 않았습니다. 대부분의 링크는 상위 탐색을 통해 액세스할 수 없으며 콘텐츠 내에 숨겨져 있습니다. 탐색만 기반으로 하는 프로젝트를 인용했다면 나는 엄청난 충격을 받았을 것입니다.

클라이언트 팀의 다양한 사람들과 이야기를 나누면서 프로젝트 범위에 대해 더 잘 이해할 수 있었고 클라이언트와 회의를 마친 후 웹사이트의 초점, 워크플로, 콘텐츠 및 기능을 확인할 수 있었습니다. 거기에서 우리는 다음과 같은 핵심 콘텐츠 유형(일부 신규, 일부 기존)을 도출했습니다.

2단계: 초점을 만듭니다. 단순화 구성.

모든 콘텐츠가 레이블이 지정된 상자로 구성되면 콘텐츠를 최상의 형태로 보여줄 수 있는 새로운 구조의 청사진을 개발해야 합니다. 그러나 먼저 초점을 만들어야 합니다.

고고학 사우스웨스트(Archeology Southwest)에 따르면 사람들은 진행 중인 프로젝트에 대한 정보를 조사하고 다가오는 이벤트에 대해 배우고 월간 잡지를 읽기 위해 웹사이트를 방문합니다. 이러한 활동은 "사이트에서 사람들은 무엇 을 하나요?"라는 질문에 답합니다. 그러나 사람들이 처음에 사이트를 방문하는 이유 를 밝히지 마십시오.

" 왜 "는 웹사이트의 초점입니다. 초점을 찾으려면 조직의 핵심을 살펴보십시오.

이 경우 나는 고고학 남서부의 심장인 "위치"를 확인했습니다. 위치가 없으면 고고학 유적지도, 유적도, 박물관이나 전시물도 없을 것입니다. 고고학의 모든 것은 위치와 관련이 있습니다.

초점이 식별되면 단순화하고 구성할 수 있습니다. Archeology Southwest의 경우 팀 페이지 및 연례 보고서와 같이 위치와 관련이 없는 범주로 콘텐츠를 나누는 것으로 시작했습니다. 약간의 정리 끝에 다음과 같은 대략적인 지도가 완성되었습니다.

위의 이미지는 두 가지 핵심 영역인 해야 할 일과 위치 를 나타냅니다. 해야 할 일 (왼쪽)은 사이트 방문자가 배우고 수행할 수 있는 활동을 다룹니다. 위치 (오른쪽)는 특정 위치와 관련된 사이트 콘텐츠에 중점을 둡니다. 왜 이런 식으로 구성합니까?

아이디어는 일반 사용자가 비디오나 프로젝트의 이름을 모를 수도 있지만 위치의 이름은 알고 있을 가능성이 있다는 것입니다. 이러한 방식으로 방문자는 위치와 관련된 콘텐츠를 찾을 수 있습니다.

또한 Locations 의 각 색상 블록은 고유한 게시물 유형을 나타냅니다. 조직적 관점에서 볼 때 전시, 수업, 온라인 전시는 모두 다른 성격의 이벤트입니다.

오래된 고고학 사우스웨스트 사이트에는 잡지에 대한 별도의 정적 페이지와 방문자가 잡지를 구입할 수 있는 온라인 상점이 있었습니다. 구매를 단순화하기 위해 잡지 템플릿에 구매 옵션을 통합했습니다.

나머지 조직 구조는 간단했습니다.

• 조직에 대해 자세히 알아볼 수 있는 "정보" 페이지
• "스토어" 페이지에 대한 직접 링크
• "기부" 페이지
• 새로운 "업데이트" 페이지

상점과 기부 페이지는 돈을 버는 페이지이므로 기본 탐색에 포함되는 것이 필수적이었습니다.

조직 청사진이 완성되면 실제 콘텐츠를 연결할 차례입니다.

3단계: 클라이언트 참여시키기

사이트맵에는 페이지 유형이 포함되지만 콘텐츠 매핑은 포함되지 않습니다. 노련한 웹 디자이너는 클라이언트가 사이트에 콘텐츠를 추가하기 시작할 때 대부분의 문제가 발생한다는 것을 알고 있습니다. 이 문제를 방지하려면 클라이언트를 처음부터 계속 루프인 상태로 유지하십시오.

Archeology Southwest의 경우 사이트맵이 포함된 Google 문서를 만들고 클라이언트에게 이전 콘텐츠를 새 구조로 매핑하도록 요청했습니다.

무언가가 적절하지 않은 경우 나중에 해결했습니다. 이것은 중요한 단계입니다. 왜요? 클라이언트가 프로세스에 참여하게 하는 것 외에도 구현이 시작되기 전에 구조 문제를 발견합니다.

이 경우 사이트맵 메뉴 항목 중 일부가 변경되었으며 클라이언트가 여러 기부 페이지를 가지고 있기 때문에 그에 대한 고유한 게시물 유형을 만드는 것이 합리적이었습니다.

와이어프레임을 통한 시각적 구조 생성

이 단계에서는 작업에 시각적 구조를 부여하기 시작합니다. 시스템이 잘 작동하고 "모든 것은 위치와 관련이 있다"는 개념을 성공적으로 통합하기 위해 포스트 유형 간에 양방향 관계를 만들었습니다.

기본 아이디어는 다음과 같습니다. 방문자가 고고학 사우스웨스트 웹사이트에 와서 그랜드 캐년을 선택하면 해당 위치에 대한 정보를 볼 수 있지만 프로젝트, 이벤트, 전시회 및 사이트 관리자가 위치로 표시한 기타 모든 것과 관련된 정보도 찾을 수 있습니다. 특정한.

링크가 양방향이므로 방문자는 프로젝트 페이지를 방문하여 그랜드 캐년에 갈 수도 있습니다. 결국 나는 이것으로 끝났다.

위치 색인 페이지에는 가장 최근의 위치가 맨 위에 있는 모든 위치가 표시됩니다. 검색창은 사용자가 페이지에 도착했을 때 가장 먼저 보게 되는 것입니다. Google 지도는 화면의 약 80%를 차지합니다. 이를 통해 사용자는 지도에서 지점을 선택할 수 있으며 스크롤하거나 검색할 때 목록 그리드가 표시됩니다.

단일 위치 페이지에서 가장 중요한 정보이기 때문에 본문은 왼쪽에 있습니다. 관련 메타 정보는 2차 정보이므로 오른쪽에 있습니다. 균형 잡힌 레이아웃을 달성하려면 첫 번째, 두 번째 및 세 번째 요소 블록 사이에 고유한 계층 구조를 갖는 것이 중요합니다. 이렇게 하면 눈이 섹션 사이를 쉽게 이동할 수 있습니다.

Archeology Southwest 레이아웃에서 사용자의 눈은 헤더에서 시작하여 콘텐츠 블록으로 이동하고 마지막으로 오른쪽 사이드바로 추적합니다. 관련 콘텐츠의 각 부분은 관련성 순서로 표시됩니다. 예를 들어, 사용자가 그랜드 캐년에 대해 읽고 있다면 이 콘텐츠 다음에 사진과 지도가 표시될 것입니다.

이것은 주로 교육 사이트이므로 "이 위치와 관련됨" 옵션을 갖는 것이 중요합니다. 다만, 각 위치에 고유하게 연관되어 있는 내용이 많지 않기 때문에 거의 사용되지 않는(관련된) 내용을 본문 아래에 하나의 블록으로 결합했습니다.

관련 콘텐츠 아래에 잡지 및 비디오 썸네일을 배치하면 시각적 요소가 추가되고 사용자를 "구매" 페이지로 안내합니다. 관련 위치를 표시하면 페이지가 완성됩니다. 이것은 사용자가 사이트를 더 탐색하도록 유도하는 좋은 방법입니다. 다음 단계는 다른 게시물 유형에 대해 이 구조를 계속하는 것입니다.

홈페이지에 명확한 목표 제공

게시물 유형에 대한 일반적인 모델이 있으면 홈페이지에 집중할 수 있습니다. 첫 번째 단계는 홈페이지의 목표를 설정하는 것입니다. 이는 UI 디자인의 중요한 부분입니다. 클라이언트의 조사에 따르면 많은 사용자가 사이트가 무엇인지 완전히 이해하지 못한 채 사이트를 우연히 발견했습니다. 따라서 소개 및 환영 텍스트는 사용자가 가장 먼저 보게 되어야 합니다.

새로운 핵심 초점은 두 번째 위치 블록을 중심으로 회전합니다. 그 다음에는 archaeologysouthwest.org에서 일어나는 모든 일(현재 잡지, 블로그, 이벤트, 뉴스레터 등)이 이어집니다. 다음은 레이아웃 프로세스의 반복입니다.

V1(왼쪽)을 사용하여 원래 홈페이지와 유사한 기본 레이아웃을 디자인했습니다. 계층 구조가 많지 않습니다. 사용자가 가장 먼저 보는 것은 추천 위치이지만 거기에서 열에서 길을 잃을 가능성이 높습니다.

V2(가운데)의 경우 눈으로 보기 쉽게 별도의 컬럼을 만들었습니다. 그러나 여전히 개선할 수 있습니다. 여기에서 콘텐츠에 대한 지식이 중요한 역할을 합니다. 고고학 사우스웨스트에서는 한 번에 두 개 이상의 이벤트가 진행되지 않는다는 것을 알고 있으므로 홈페이지에 여러 이벤트를 위한 공간을 두는 것은 이치에 맞지 않습니다.

V3(오른쪽)에서는 앞으로의 이벤트에 집중했습니다. 어떤 이유로 이벤트가 두 개 이상인 경우 사용자는 "더보기" 버튼을 클릭하고 나머지를 볼 수 있습니다. 나는 또한 클라이언트의 돈을 버는 잡지이기 때문에 현재 잡지에 더 중점을 둡니다. 사용자는 상단에서 시작하여 F 패턴으로 아래로 작업합니다. 눈의 흐름은 다음과 같습니다.

특집 위치 > 환영합니다 > 매거진 > 이벤트 > 뉴스

시각적 와이어프레임과 사이트의 구조가 제자리에 있으면 기능과 작동 방식을 더욱 쉽게 확인할 수 있습니다. 이 시점에서 나는 기능과 사용자 상호 작용의 흐름을 검토하기 위해 클라이언트와 또 다른 회의를 가집니다. 두 가지 모두 이 단계에서 훨씬 더 명확합니다.

추후에 개정판도 계속 나올까요? 예, 그러나 전체 프로세스가 변경되는 것이 아니라 조정될 것입니다. 가장 중요한 것은 놀라움이 없을 것입니다.

브랜드 스타일 가이드 통합

이제 흥미로운 부분이 나옵니다. 와이어프레임을 사람들이 사용하고 경험할 수 있는 것으로 변환하는 것입니다. 이번 프로젝트에서는 브랜드 컬러와 타이포그래피를 구현하여 글을 소화하기 쉽게 만들고자 했습니다.

타이포그래피 조합 실험

타이포그래피는 좋은 웹 디자인에 없어서는 안 될 중요한 요소이므로 초기에 유형 체계를 파악해야 합니다. 대부분의 고고학 사우스웨스트 아이덴티티는 Univers Condensed Light 및 Adobe Caslon 글꼴을 사용합니다. Adobe Caslon을 언제 사용해야 하는지에 대한 규칙은 없지만 Univers만큼 자주 사용되지 않는다는 것을 알았습니다.

어떤 조합이 전문 비영리 단체에 가장 좋은 느낌을 주는지 알아보기 위해 작은 글꼴 연구를 수행했습니다. 그러나 나는 또한 내 유형 체계가 클라이언트의 마케팅 자료와 너무 다르게 보이는 것을 원하지 않았습니다.

글꼴 비교를 한 결과 제목 글꼴은 Adobe Caslon, 자막은 Univers를 사용해야 한다는 것이 분명해졌습니다. 대소문자를 구분하는 주요 제목을 설정하면 브랜드에 더 개인적인 느낌이 들지만 모든 대문자는 기업 분위기를 더 많이 만듭니다.

웹사이트의 모양과 느낌을 다듬어라

나는 사용자들이 Archeology Southwest가 접근하기 쉽고 매우 유능하다고 느낄 수 있도록 가볍고 개방적인 경험을 만들기 시작했습니다. 분석 데이터에 따르면 대부분의 방문자는 데스크톱 브라우저를 사용합니다(대부분의 사람들이 연구를 위해 사이트를 방문하기 때문일 수 있음). 따라서 나의 초기 초점은 데스크탑 사용자를 위한 디자인이었습니다.

데스크탑에서 방문할 때 방문자가 주요 위치, 환영 텍스트 및 잡지 제목의 일부 뒤에 오는 예정된 이벤트를 즉시 볼 수 있기를 원했습니다. 이런 식으로 사람들은 먼저 회사가 무엇인지, 무엇을 홍보하는지 알 수 있습니다.

모바일 장치에서는 우선 순위가 약간 다릅니다. 사용자는 이동 중에 정보에 액세스하기 때문에 이벤트가 더 중요하므로 목록에서 더 높은 위치에 배치됩니다.

또한 바닥글의 기부 버튼을 버튼에서 문장으로 변경하여 보다 친근하게 업데이트 하였습니다.

강한 마무리: 세부 사항을 염두에 두십시오

사용자가 세부 정보 페이지를 찾는 두 가지 이유가 있습니다. 하나는 랜드마크에 대해 더 알고 싶거나 이미 위치를 알고 있고 추가 정보(길찾기, 전화번호 등)를 찾고 있기 때문입니다. 따라서 사용자가 검색할 필요가 없도록 두 옵션을 즉시 제공하는 것이 중요합니다.

내용 영역에서 세부 정보 열을 분리하여 더 많은 가중치를 부여하고 페이지를 더 흥미롭게 만들기로 결정했습니다. 이렇게 하면 구성 계층 구조를 만드는 데 도움이 되므로 방문자가 페이지를 방문하면 먼저 페이지 제목이 표시되고 그 다음에는 작은 이미지 갤러리가 표시되고 세부 정보 열이 표시됩니다.

이러한 유형의 디자인은 사용자가 위치에 대한 추가 세부 정보를 즉시 알아차릴 수 있도록 합니다. 열을 둘러싸고 있는 약간의 추가 패딩은 눈의 초점을 유지하고 정보를 더 쉽게 훑어볼 수 있도록 합니다.

예상대로 모바일 보기가 축소됩니다. 콘텐츠가 먼저 지워지고 메타 정보가 따라옵니다. 동영상과 잡지는 모바일 사용자에게 가장 덜 중요하기 때문에 모바일 페이지에서 맨 마지막에 배치했습니다. 다른 페이지는 동일한 구조를 따라 일관된 흐름과 경험을 제공합니다.

웹 재설계는 신중한 계획을 기반으로 합니다.

웹사이트 재설계 프로세스를 되돌아보면 대부분의 시간이 조직화 및 계획에 전념했음을 알 수 있습니다. 프로젝트의 30%만이 사이트를 디자인하는 데 사용되었습니다.

종종 디자이너가 자신의 작업을 보여줄 때 의사 소통의 핵심 요소에 얼마나 많은 시간을 할애했는지 전달하지 못하여 경험이 부족한 디자이너가 목업으로 바로 뛰어들게 만듭니다. 결과? 탈선한 프로젝트와 불행한 고객.

웹사이트 재설계가 성공하려면 세부적인 계획을 세워야 합니다. 시간을 내어 프로젝트 사전 조사를 수행하고 기존 콘텐츠에 익숙해지고 클라이언트를 참여시키는 것이 중요한 단계입니다.

결국 방법이 없습니다. 놀라운 웹사이트 재설계와 전문적인 자신감으로 가는 길은 프로젝트 조직에 대한 체계적인 접근 방식을 통해 이루어집니다.