Podstawy przeprojektowania strony internetowej – studium przypadku

Nierzadko kończy się projekt przeprojektowania strony internetowej tylko po to, aby spojrzeć wstecz i pomyśleć: „Zrobiłbym rzeczy inaczej, gdybym wiedział to, co wiem dzisiaj”.

Wszyscy tam byliśmy. Ekscytujemy się nowym projektem, przekomarzamy się z klientem, podpisujemy kontrakty i zaczynamy makietować prototypy. Życie wygląda dobrze, ale fundamenty projektu są chwiejne.

Nieuchronnie zmiany i pełzanie zakresu zaczynają się wkradać, gdy tylko prezentowana jest pierwsza koncepcja projektowa, i stamtąd jest w dół. Komunikacja się rozpada, nic nie idzie zgodnie z planem, a ostatecznie nowo zaprojektowana strona internetowa przypomina potworność, do naprawienia której zostałeś zatrudniony.

Światowej klasy projekt i wrażenia użytkownika nie zaczynają się od ładnej makiety — opierają się na planowaniu strategicznym i wizji projektu, która koncentruje się na celach firmy. Głównym celem nie może być „Zróbmy ładniejszą witrynę”.

Projektanci stron internetowych są odpowiedzialni za doświadczenie użytkownika (UX) i interfejs użytkownika (UI). Naszym zadaniem jest zapewnienie użytkownikom optymalnego doświadczenia w interakcji z projektowanymi przez nas interfejsami. Wymaga to dokładnego planowania od samego początku koncepcji projektu.

W tym artykule przedstawiono niezawodny proces, który pomoże zapewnić, że następna przebudowa witryny będzie oparta na solidnych podstawach.

Wartość przeprojektowania strony internetowej Badania przedprojektowe

Aby zademonstrować ten proces, przyjrzyjmy się fazom przebudowy witryny internetowej ukończonej dla Archeology Southwest, organizacji non-profit, która bada i chroni stanowiska archeologiczne w południowo-zachodnich Stanach Zjednoczonych.

Po wstępnym zbadaniu dziedziny i konkurencji klienta, dokładnie sprawdź każdy dostępny zasób witryny. Ta analiza jest rozliczana oddzielnie i ma miejsce przed napisaniem wyceny projektu. Praca w ten sposób zapobiega niejednoznacznym lub zawyżonym szacunkom, które powstają, gdy projektanci stron internetowych próbują uwzględnić problemy, które mogą pojawić się później w projekcie.

W przypadku Archeology Southwest miałem do czynienia z witryną, która pilnie wymagała uwagi — góry i góry zaśmieconej zawartości wewnątrz starożytnego portalu CMS. Było źle, więc postanowiłem stworzyć porządek.

Krok 1: Zapoznaj się z treścią

Podczas przebudowy domu ważne jest, aby spróbować uratować cenne materiały przed dniem rozbiórki. Ta sama zasada dotyczy projektowania stron internetowych. Musisz przejść przez stronę po stronie i wyciągnąć całą zawartość. Jako projektanci musimy dowiedzieć się, jakie treści zasługują na unikalny typ postów, a jakie strony są statyczne.

Gdy już to zrobisz, opracuj strategię, jak wszystko uporządkować, ale nie decyduj, jakie treści powinny pozostać, a które powinny zostać usunięte. Dlaczego nie?

W kontaktach z prawdziwymi firmami i organizacjami za zawartość witryny odpowiada wiele różnych osób, a ilość istniejącej zawartości może być oszałamiająca. Najlepszym podejściem jest sklasyfikowanie wszystkiego w pierwszej kolejności.

Zazwyczaj zaczynam od głównej nawigacji i przechodzę strona po stronie. W ten sposób będę miał architekturę informacji i mapę witryny przed pierwszym spotkaniem z klientem.

Niestety stanowisko Archeology Southwest nie było typowe. Większość linków nie była dostępna przez górną nawigację i była ukryta w treści. Miałbym niemiłą niespodziankę, gdybym zacytował projekt oparty na samej nawigacji.

Rozmawiając z różnymi osobami z zespołu klienta, udało mi się uzyskać lepszy obraz zakresu projektu, a po spotkaniu z klientem mogłem określić, na czym polega jego strona internetowa, przepływ pracy, treść i funkcje. Stamtąd wymyśliliśmy następujące podstawowe typy treści (niektóre nowe, niektóre już istniejące):

Krok 2: Stwórz fokus. Uproszczać. Zorganizować.

Gdy cała zawartość zostanie zorganizowana w pola z etykietami, nadszedł czas na opracowanie planu nowej struktury, która zaprezentuje zawartość w najlepszej formie. Ale najpierw musimy się skupić.

Według Archeology Southwest ludzie odwiedzają ich witrynę internetową, aby znaleźć informacje o trwających projektach, dowiedzieć się o nadchodzących wydarzeniach i przeczytać miesięcznik. Te działania odpowiadają na pytanie „ Co ludzie robią w witrynie?” ale nie ujawniaj, dlaczego ludzie odwiedzają witrynę w pierwszej kolejności.

Witryna koncentruje się na „ dlaczego ”. Aby znaleźć punkt skupienia, spójrz na rdzeń organizacji.

W tym przypadku zidentyfikowałem „lokalizację” jako serce Archeology Southwest. Bez lokalizacji nie byłoby stanowisk archeologicznych, ruin, a już na pewno nie byłoby muzeów ani eksponatów. Wszystko w archeologii odnosi się do lokalizacji.

Mając określony cel, możemy uprościć i uporządkować. W przypadku Archeology Southwest zacząłem od podzielenia treści na kategorie niezwiązane z lokalizacjami, takie jak strony zespołów i raporty roczne. Po krótkim sprzątaniu skończyłem z tą przybliżoną mapą:

Powyższy obraz przedstawia dwa główne obszary, które się pojawiły: rzeczy do zrobienia i lokalizacje . Rzeczy do zrobienia (po lewej) obejmuje czynności, o których odwiedzający witrynę może się dowiedzieć i wykonać. Lokalizacje (po prawej) skupia się na treści witryny związanej z określonymi lokalizacjami. Po co tak to układać?

Chodzi o to, że przeciętny użytkownik może nie znać nazwy filmu lub projektu, ale prawdopodobnie zna nazwę lokalizacji. W ten sposób odwiedzający mogą znaleźć treści związane z lokalizacją.

Dodatkowo każdy kolorowy blok w Locations reprezentuje unikalny typ posta. Z organizacyjnego punktu widzenia wystawy, zajęcia i wystawy internetowe są wydarzeniami o innym charakterze.

W starej witrynie Archeology Southwest znajdowały się oddzielne statyczne strony czasopisma i sklepu internetowego, w którym odwiedzający mogli kupić czasopismo. Aby uprościć zakupy, zintegrowałem opcję zakupu z szablonem magazynu.

Pozostała struktura organizacyjna była prosta:

• Strona „O firmie”, aby dowiedzieć się więcej o organizacji
• Bezpośredni link do strony „Sklep”
• Strona „Darowizna”
• Nowa strona „Aktualizacje”

Strony sklepu i darowizn są źródłem pieniędzy, dlatego konieczne było ich uwzględnienie w głównej nawigacji.

Gdy plan organizacyjny jest gotowy, nadszedł czas, aby połączyć rzeczywistą zawartość.

Krok 3: Zaangażuj klienta

Mapa witryny zawiera typy stron, ale nie zawiera mapowania treści. Doświadczeni projektanci stron internetowych wiedzą, że większość problemów pojawia się, gdy klient zaczyna dodawać treści do swojej witryny. Aby uniknąć tego problemu, utrzymuj klienta w pętli od samego początku.

W przypadku Archeology Southwest utworzyłem dokument Google, który zawierał mapę witryny, i poprosiłem klienta o zmapowanie jego starej zawartości z nową strukturą.

Jeśli coś nie pasowało, zajęliśmy się tym później. To krytyczny krok. Czemu? Oprócz zaangażowania klienta w proces, ujawnia problemy ze strukturą przed rozpoczęciem wdrożenia.

W tym przypadku niektóre elementy menu mapy witryny zostały zmienione, a ponieważ klient miał wiele stron z darowiznami, sensowne było utworzenie unikalnego typu postu właśnie w tym celu.

Twórz wizualną strukturę za pomocą wireframing

Na tym etapie zaczynam nadawać pracy strukturę wizualną. Aby system działał dobrze i skutecznie integrował pojęcie, że „wszystko jest związane z lokalizacją”, stworzyłem dwukierunkową relację między typami postów.

Oto podstawowa idea: gdy odwiedzający wejdą na stronę Archeology Southwest i wybiorą Wielki Kanion, zobaczą informacje o tej lokalizacji, ale znajdą również informacje związane z projektami, wydarzeniami, wystawami i wszystkim innym, co administratorzy witryny oznaczą jako lokalizację- konkretny.

Ponieważ link jest dwukierunkowy, odwiedzający mogą również dostać się do Wielkiego Kanionu, odwiedzając stronę projektu. Ostatecznie skończyło się na tym:

Strona indeksu lokalizacji pokazuje wszystkie lokalizacje z najnowszymi u góry. Pasek wyszukiwania to pierwsza rzecz, którą widzi użytkownik po wejściu na stronę. Mapa Google zajmie około 80 procent ekranu. Dzięki temu użytkownicy mogą wybierać punkty na mapie, a podczas przewijania lub wyszukiwania pojawia się siatka listy.

Na stronie z pojedynczą lokalizacją główna treść znajduje się po lewej stronie, ponieważ są to najważniejsze informacje. Powiązane informacje meta są drugorzędne, więc znajdują się po prawej stronie. Aby osiągnąć dobrze zrównoważony układ, ważne jest, aby mieć wyraźną hierarchię między pierwszym, drugim i trzecim blokiem elementu. Pozwala to oczom bez wysiłku poruszać się między sekcjami.

W układzie Archeology Southwest oko użytkownika zaczyna się od nagłówka, następnie przechodzi do bloku treści, a na końcu kieruje się na prawy pasek boczny. Każdy fragment powiązanej treści jest wyświetlany w kolejności trafności. Na przykład, jeśli użytkownik czyta o Wielkim Kanionie, po tej treści prawdopodobnie pojawią się zdjęcia i mapa.

Ponieważ jest to głównie witryna edukacyjna, ważne jest, aby mieć opcję „Powiązane z tą lokalizacją”. Jednak nie ma zbyt wielu treści, które są jednoznacznie powiązane z każdą lokalizacją, więc połączyłem rzadko używaną (ale powiązaną) zawartość w jeden blok pod treścią.

Umieszczenie kciuków czasopism i filmów pod powiązanymi treściami dodaje dodatkowe elementy wizualne i kieruje użytkowników do strony „Kup”. Strona jest uzupełniana, pokazując powiązane lokalizacje. To świetny sposób na zachęcenie użytkowników do dalszego poznawania witryny. Następnym krokiem jest kontynuacja tej struktury dla innych typów postów.

Zapewnij stronie głównej jasny cel

Mając ogólny model typów postów, mogę skupić się na stronie głównej. Pierwszym krokiem jest określenie celu strony głównej — jest to ważna część projektowania interfejsu użytkownika. Badania klienta wykazały, że wielu użytkowników natknie się na witrynę, nie do końca rozumiejąc, czym ona jest. Dlatego wprowadzenie i tekst powitalny muszą być pierwszą rzeczą, jaką widzą użytkownicy.

Nowy główny cel kręci się wokół drugorzędnego bloku lokalizacji. Po tym następuje wszystko, co dzieje się na archaeologysouthwest.org (aktualny magazyn, blog, wydarzenia, biuletyn i tak dalej). Oto iteracja procesu tworzenia układu:

W V1 (po lewej) zaprojektowałem podstawowy układ, który przypomina oryginalną stronę główną. Nie ma dużej hierarchii. Pierwszą rzeczą, jaką widzą użytkownicy, jest polecana lokalizacja, ale stamtąd prawdopodobnie zgubią się w kolumnach.

W przypadku V2 (w środku) stworzyłem osobną kolumnę, która jest łatwiejsza do śledzenia dla oka. Można to jednak jeszcze poprawić. W tym miejscu wiedza o treści odgrywa główną rolę. Wiem, że w Archeology Southwest nigdy nie odbywają się więcej niż dwa wydarzenia na raz, więc nie ma sensu umieszczać na stronie głównej miejsca na kilka wydarzeń.

W V3 (po prawej) skupiłem się na nadchodzących wydarzeniach. Jeśli z jakiegoś powodu jest więcej niż dwa zdarzenia, użytkownik może kliknąć przycisk „Więcej” i zobaczyć resztę. Kładę też dodatkowy nacisk na obecną gazetę, ponieważ jest ona źródłem pieniędzy dla klienta. Użytkownicy zaczynają od góry i schodzą w dół we wzorze F. Przepływ oczu to:

Polecana lokalizacja > Witamy > Magazyn > Wydarzenia > Wiadomości

Dzięki wizualnemu szkieletowi i strukturze witryny znacznie łatwiej jest utrwalić funkcje i sposób, w jaki wszystko będzie działać. W tym momencie mam kolejne spotkanie z klientem, aby omówić funkcjonalność i przebieg interakcji z użytkownikiem, które na tym etapie są znacznie jaśniejsze.

Czy w przyszłości nadal będą poprawki? Tak, ale będą to poprawki, a nie zmiany całego procesu. Co najważniejsze, nie będzie niespodzianek.

Uwzględnij Przewodnik po stylach marki

Teraz nadchodzi ekscytująca część — przekształcenie modeli szkieletowych w coś, czego ludzie będą używać i czego będą doświadczać. W tym projekcie chciałem, aby treść pisana była łatwa do przyswojenia poprzez zastosowanie kolorów marki i typografii.

Eksperymentuj z kombinacjami typografii

Typografia jest integralną częścią dobrego projektowania stron internetowych, więc musimy wcześnie opracować nasz schemat typów. Większość tożsamości Archeology Southwest wykorzystuje czcionkę Univers Condensed Light i Adobe Caslon. Nie było reguł, kiedy miał być używany Adobe Caslon, ale zauważyłem, że nie był on używany tak często, jak Univers.

Przeprowadziłem badanie małej czcionki, aby zobaczyć, jakie pary tworzą najlepsze wyczucie profesjonalnej organizacji non-profit. Jednak nie chciałem też, aby mój schemat typu wyglądał zbyt odmiennie od materiałów marketingowych klienta.

Po przeprowadzeniu porównań czcionek stało się jasne, że Adobe Caslon powinien być czcionką tytułową, a Univers będzie używany do napisów. Umieszczenie głównych tytułów wielkimi literami nadaje marce bardziej osobisty charakter, podczas gdy wszystkie czapki tworzą bardziej korporacyjny klimat.

Dostosuj wygląd i styl strony internetowej

Postanowiłem stworzyć lekkie i otwarte środowisko, aby użytkownicy poczuli, że Archeology Southwest jest zarówno przystępny, jak i wysoce kompetentny. Na podstawie danych analitycznych większość odwiedzających korzysta z przeglądarek komputerowych (prawdopodobnie dlatego, że większość osób odwiedza witrynę w celach badawczych). Dlatego początkowo skupiłem się na projektowaniu dla użytkowników komputerów stacjonarnych.

Przychodząc z komputerów, chciałem, aby odwiedzający natychmiast zobaczyli polecaną lokalizację, tekst powitalny i nadchodzące wydarzenia, a następnie część tytułu magazynu. W ten sposób ludzie najpierw widzą, czym zajmuje się firma i co promują.

Na urządzeniach mobilnych priorytety są nieco inne. Ponieważ użytkownicy uzyskują dostęp do informacji w podróży, wydarzenia są ważniejsze, więc są umieszczane wyżej na liście.

Zaktualizowałem również przycisk darowizny w stopce, aby był bardziej przyjazny, zmieniając go z przycisku na zdanie.

Mocne wykończenie: pamiętaj o szczegółach

Istnieją dwa powody, dla których użytkownicy odwiedzają stronę szczegółów — albo chcą dowiedzieć się więcej o punkcie orientacyjnym, albo już znają lokalizację i szukają dodatkowych informacji (kierunków, numerów telefonów itp.). Dlatego ważne jest, aby od razu przedstawić obie opcje, aby użytkownicy nie musieli szukać.

Postanowiłem wydzielić kolumnę szczegółów z obszaru treści, aby nadać jej większą wagę i uczynić stronę ciekawszą. Pomaga to w tworzeniu hierarchii kompozycji, więc gdy odwiedzający wejdzie na stronę, najpierw zobaczy tytuł strony, a następnie małą galerię obrazów, a następnie kolumnę szczegółów.

Ten rodzaj konstrukcji zapewnia, że ​​użytkownicy od razu zauważą dodatkowe szczegóły lokalizacji. Niewielka dodatkowa wyściółka otaczająca kolumnę utrzymuje skupienie oczu i ułatwia przeglądanie informacji.

Widok mobilny załamuje się, jak można by się spodziewać. Najpierw zawartość zostanie wyczyszczona, a następnie metainformacje. Umieściłem filmy i czasopisma na stronie mobilnej jako ostatnie, ponieważ są one najmniej ważne dla użytkowników mobilnych. Inne strony mają tę samą strukturę, aby stworzyć spójny przepływ i wrażenia.

Przeprojektowanie strony internetowej opiera się na starannym planowaniu

Patrząc wstecz na proces przeprojektowywania strony internetowej, widać, że większość czasu poświęcono na organizację i planowanie. Tylko 30 procent projektu zostało poświęcone na zaprojektowanie strony.

Często, gdy projektanci pokazują swoje prace, nie potrafią przekazać, ile czasu poświęca się na nakrętki i śruby w komunikacji, co prowadzi do tego, że niedoświadczeni projektanci przeskakują od razu do makiet. Wynik? Wykolejone projekty i niezadowoleni klienci.

Aby przeprojektowanie strony internetowej zakończyło się sukcesem, należy przeprowadzić szczegółowe planowanie. Poświęcenie czasu na wykonanie badań przedprojektowych, zapoznanie się z istniejącymi treściami i zaangażowanie klienta to kluczowe kroki.

Ostatecznie nie da się tego obejść; Droga do niesamowitych redesignów stron internetowych i zaufania zawodowego jest utorowana przez metodyczne podejście do organizacji projektu.