Projektowanie strony internetowej aplikacji internetowej: przykłady, porady i wskazówki
Sieć jest całkowicie przesycona aplikacjami, które pomagają łączyć się z siecią społecznościową, tworzyć listy zakupów, zarządzać dużymi projektami, decydować, kto zrobi herbatę i każde inne szalone zadanie, jakie możesz sobie wyobrazić.
W trakcie tych zawodów, jak możesz przekonać odwiedzających, że Twoja aplikacja jest przysłowiową igłą wśród siana? Dzisiaj przyjrzymy się prawdziwym przykładom, aby zobaczyć, czy możemy dowiedzieć się, które strategie naśladować, a których unikać.
Strona główna Twojej aplikacji jest niezwykle ważna
Spędziłeś mnóstwo czasu, pieniędzy i wysiłku, tworząc aplikację internetową. Jest to przedsięwzięcie na najwyższym poziomie, które z pewnością złapie jak pożar. Jest tylko jeden haczyk, musisz przekonać ludzi, aby spróbowali.
Bez względu na to, jak dobra jest twoja aplikacja internetowa, nadal musisz mieć solidne taktyki sprzedaży, które ostatecznie przekonają ludzi do kliknięcia przycisku „zarejestruj się”. Nawet jeśli usługa jest całkowicie bezpłatna i oferuje mnóstwo funkcji, naprawdę musisz pracować, aby wygrać te konwersje.
Nigdy nie zakładaj, że tylko dlatego, że użytkownik wylądował na Twojej stronie głównej, jest on naprawdę zainteresowany tym, co masz do zaoferowania, a zatem potrzebuje tylko niewielkiej presji, aby przejść dalej. Szanse są, oni podążali za jakimś linkiem, z niejasnym pojęciem, gdzie by się skończyli i są na delikatnym etapie, w którym prawdopodobnie przeniosą się na inną stronę w ciągu kilku sekund, jeśli ich nie wciągniesz.
Twoja strona główna aplikacji internetowej jest jednym z najcenniejszych narzędzi marketingowych. Oprzyj się pokusie szybkiego połączenia czegoś i zrób z siebie wszystko. Spójrzmy na kilka przykładów, aby zobaczyć, czego możemy się nauczyć.
Wskazówka: zachowaj prostotę projektu i mocny przekaz
Nasz pierwszy przykład pochodzi z nowej usługi o nazwie Kroud. Rzućmy okiem na część strony powyżej zakładki.
Ta strona bardzo mi się podoba. Przede wszystkim jest bardzo prosty i skoncentrowany. Nie przytłacza cię pustymi twierdzeniami o tym, jak usługa zmieni twoje życie, ani nie omija buszu wokół tego, czym jest ta strona. Nie ma nic gorszego niż strona, która nie definiuje się dobrze. Jeśli nie mogę powiedzieć, co robi twoja aplikacja w ciągu pięciu sekund, idę dalej.
Kroud naprawdę łączy zadanie polegające na powiązaniu złożonej usługi z wyraźnym komunikatem, który stanowi również silne wezwanie do działania: „Utwórz interaktywną stronę FAQ w kilka sekund”. Ta linia jest jedną z pierwszych rzeczy, które widzę, gdy ładuję stronę i natychmiast przekazuje dokładnie to, co robi strona.
Duży przycisk
Kolejną rzeczą, której możemy się nauczyć od Krouda, jest to, że duże, odważne przyciski rejestracji są dobrą rzeczą! Oto przycisk Kroud w rzeczywistym rozmiarze.
Ten przycisk jest ogromny i bardzo jasny na temat tego, co się dzieje po naciśnięciu: „Rozpocznij Kroud”, z dodatkowym komunikatem „To nic nie kosztuje!”. Zauważ, jak ten przycisk przyciąga uwagę nie tylko rozmiarem, ale także kolorem. Jest o wiele jaśniejszy niż inne treści, że od razu przyciągają Cię twoje oczy.
Wskazówka: zrzuty ekranu są koniecznością!
Twoja strona główna aplikacji ma dwa główne cele: edukować ludzi na temat Twojego produktu i przekonać go, aby wypróbował. Są to te same cele, które widzisz w marketingu i reklamie niemal każdej firmy na świecie.
Wyobraź sobie reklamę w czasopismach lub witrynę internetową nowej korwety. Jak myślisz, jak wyglądałaby ta strona? Istnieje milion możliwych konstrukcji, ale jedna rzecz prawdopodobnie pozostanie stała: zobaczysz samochód. Korwety mają dziedzictwo dobrego wzornictwa i wiedzą, że najlepszym sposobem, aby pochwalić się ich najnowszym wyczynem, jest pokazanie jego zdjęcia w całej okazałości. Kto może być przekonany do zakupu samochodu sportowego, nawet go nie widząc? Byłoby to tym bardziej, gdyby samochód sportowy nie był korwetą, lecz czymś, o czym nikt nigdy nie słyszał.
Działa to jako metafora strony głównej aplikacji internetowej. Aplikacje internetowe to kilkanaście centów i nikt nigdy nie słyszał o twoim. O ile nie wstydzisz się swoich słabych umiejętności projektowych, ludzie będą chcieli dokładnie zobaczyć, jak będzie wyglądać usługa, zanim poświęcą czas na zarejestrowanie się.
Ludzie z Freckle dobrze o tym wiedzą i zdecydowali się na zwieńczenie strony szeregiem pięciu zrzutów ekranu.
Mimo że duże części niektórych z nich są pokryte, obraz jako całość naprawdę daje rzetelne spojrzenie na to, jak wygląda usługa.
Funkcje jako zrzuty ekranu
Obecny trend w projektowaniu stron głównych aplikacji internetowych polega na pokazywaniu funkcji na stronie głównej za pomocą małych ikon. To świetny pomysł, który naprawdę podnosi wartość estetyczną strony i pomaga rozbijać duże bloki kopii. Oto przykład z fakturowania Ballpark.
Chociaż ikony są lepsze niż tekst, w przypadku, gdy masz naprawdę solidny interfejs, tak naprawdę uważam, że zrzuty ekranu mogą być znacznie silniejszym elementem wizualnym. Zrzuty ekranu bezpośrednio komunikują twoją usługę, podczas gdy ogólne ikony przedstawiają jedynie abstrakcyjne przedstawienie tego, czego użytkownicy mogą się spodziewać. Sprawdź, jak Freckle omawia ich funkcje.
Widzisz, jak przesyłanie wiadomości jest wzmocnione przez obraz dokładnie tego, jak to będzie wyglądać w aplikacji? Jest to trend, który ostatnio widzę coraz częściej i uważam, że jest dobry, który naprawdę poprawia pomysł ikon z poprzedniej generacji aplikacji internetowych.
Jako kolejny przykład TodayPulse pokazuje trzy główne funkcje na poziomym pasku zrzutów ekranu:
Peeve: Brak zrzutów ekranu
Możesz myśleć, że zrzuty ekranu są dość proste i że nikt nie potrzebuje tego przypomnienia, ale prawda jest taka, że istnieją niezliczone strony główne aplikacji internetowych, które nie dają najmniejszej wskazówki, jak naprawdę wygląda aplikacja.
Nawet jeśli te strony są dość atrakcyjne, jak na przykład Wordfaire poniżej, szanse na to, że spróbuję, są znacznie mniejsze, ponieważ nie widzę podglądu.
Stare powiedzenie „obraz jest wart tysiąca słów” naprawdę sprawdza się na tej arenie. Po prostu nie ma mowy, żebym przeczytał siedem akapitów tekstu na stronie głównej Wordfaire. Wymieniłem przynajmniej pięć z nich na zrzut ekranu bez namysłu.
Wskazówka: pozwól użytkownikom grać na żywo
Koncepcja „spróbuj przed zakupem” istnieje od zarania sprzedawcy. To prosta koncepcja, która będzie obowiązywać tak długo, jak długo będą dostępne produkty. Zobowiązania są do bani, zwłaszcza gdy wiąże się to z niepewnością. Pozwalając użytkownikowi najpierw wypróbować aplikację internetową, niepewność zostaje usunięta.
Bardzo ważne jest, aby pamiętać, że „wypróbuj przed zakupem” dotyczy nawet bezpłatnych usług! To wydaje się mylące, ale jest naprawdę bardzo proste. Nawet bezpłatna usługa pochłania mój czas, który wydaje mi się bardzo cenny i za który nic nie wymienię. Zapisanie się do bezpłatnego serwisu internetowego nadal wydaje się zobowiązaniem; takiego, którego nie chcę tworzyć, chyba że jestem pewien, że podoba mi się ten produkt.
Pomysł jest prosty, stwórz sposób, w jaki użytkownicy mogą się wyśmiewać i kopać opony w Twojej aplikacji bez wprowadzania choćby odrobiny informacji. Widzimy to w akcji poniżej dla Pen.io. To kolejna strona bez zrzutów ekranu, ale jest nieco lepsza dzięki dołączeniu linku do przykładu, dzięki czemu możesz zobaczyć, co otrzymujesz z usługi.
Znowu świetnie, że Pen.io to zawiera, ale wykonanie jest silniejsze w Kroud, gdzie link do strony exampe jest wzmocniony przez podgląd.
Peeve: Długie wycieczki
Niektóre aplikacje internetowe zabiorą Cię w dziesięciominutową wycieczkę, która szczegółowo objaśnia ich obsługę. Nie zrozum mnie źle, informacje są dobre, a jeśli płacę za usługę, będę jej chciał. Ale czy „prezentacja produktu” naprawdę powinna być tak pracochłonna?
Jeśli kliknę link z napisem „Obejrzyj wycieczkę”, naprawdę chcę zobaczyć aplikację. Przykład na żywo, o którym właśnie rozmawialiśmy, w znacznie silniejszym niż 2000 słów tłumaczeniu, jak to będzie, kiedy w końcu osiągniesz punkt, w którym możesz go wypróbować. Niektóre witryny tworzą nawet zmodyfikowany „inteligentny” przykład na żywo, który prowadzi użytkownika przez cały proces. Jest to świetny sposób, aby umożliwić użytkownikom wypróbowanie Twojej usługi, jednocześnie upewniając się, że dostali punkt i zobaczą, co chcesz.
Ponownie, niekoniecznie źle jest rantować o swoich funkcjach, ale pamiętaj, że ważne jest, aby pozwolić użytkownikom po prostu wskoczyć i zobaczyć, co myślą.
Dołącz wideo
Innym pomysłem na pokazanie swojej aplikacji internetowej w akcji jest umieszczenie krótkiego filmu bezpośrednio na stronie głównej. Jeśli obraz jest wart tysiąca słów, to jedna minuta przy 15-30 klatkach na sekundę jest bezcenna! Film osiąga ten sam cel, co przykład i zrzuty ekranu, tyle że jest bardziej dynamiczny niż zrzuty ekranu i ma bardziej uporządkowaną strukturę niż pole testowe w dowolnej formie.
Woliera robi to dobrze, pokazując upływ czasu swojego edytora obrazów, tworząc złożoną manipulację zdjęciami.
Jedną z moich ulubionych realizacji wideo strony głównej aplikacji internetowej jest Greplin. Tutaj pojawia się wideo po załadowaniu strony, ale jeśli nie zaczniesz wideo po kilku sekundach, zamieni się ono w pokaz slajdów ze zrzutów ekranu.
Peeve: bajki, które nigdy nie pokazują aplikacji
Z jakiegoś powodu fajną rzeczą do zrobienia jest teraz połączenie jednego z tych filmów jako zabawnej kreskówki. Często jest to świetny pomysł, ale problem, który mam, polega na tym, że po dwóch minutach nudnej małej animacji wciąż nie mam pojęcia, jak naprawdę wygląda aplikacja!
Dwa poniższe filmy z Minus i Summify są tego dobrym przykładem. To prawda, że w końcu prawie pokazali ci ilustrowaną wersję aplikacji, ale tylko na samym końcu, a nawet wtedy jest to niewielki, abstrakcyjny podgląd.
Zamykanie myśli: przepis na sukces
Wszystkie porady zawarte w tym artykule dotyczą dwóch głównych celów strony głównej aplikacji internetowej, o których już mówiliśmy: edukacji i zachęty. Najpierw usuń bałagan z twojego projektu i zredukuj go do najważniejszych elementów, aby odwiedzający mógł skupić się na istotnych informacjach bez rozpraszania uwagi.
W swoim komunikacie zrób odważne oświadczenie o tym, co robi aplikacja i dla kogo jest przeznaczona. Dzisiaj nie rozmawialiśmy o tym ostatnim punkcie, ale istnieje mocny argument, który sugeruje, że zyskasz więcej konwersji, wyraźnie identyfikując odbiorców docelowych. Przykład: „MyCoolWebApp pomaga projektantom i programistom organizować informacje o kliencie i projekcie” jest lepsze niż „MyCoolWebApp organizuje informacje o kliencie i projekcie”. Pamiętaj też, aby wskazać wszelkie ważne funkcje i dlaczego użytkownicy powinni korzystać z aplikacji.
Po usunięciu wiadomości, czas skupić się na zaprezentowaniu produktu odbiorcom. Trzy świetne sposoby, aby to zrobić, to zrzuty ekranu (kilka, jeśli możesz to zrobić), przykładowe konta na żywo i wycieczki wideo (takie, które faktycznie pokazują produkt). Jej celem jest zmniejszenie niepewności otaczającej Twój produkt. Im mniej niepewności, tym mniej użytkowników będzie się wahało przed zarejestrowaniem.
To wszystko oczywiście zakłada, że masz produkt wysokiej jakości. Jeśli twój interfejs jest kiepski, to oczywiście ukryj go przed opinią publiczną i trzymaj się nudnych, długich opisów!
