Porady

31
Paź

Mobilna aplikacja internetowa czy natywna? A może hybryda?

Pierwszym krokiem w tworzeniu aplikacji mobilnej jest określenie, czy powinna być natywna, czy „internetowa”.

Ta decyzja będzie miała wpływ na każdy kolejny etap rozwoju projektu, od zatrudnienia odpowiednich programistów po określenie na jakich urządzeniach aplikacja będzie dostępna.

Czy nie ma rozwiązań pośrednich?

Obecne technologie pozwalają na tworzenie hybrydowych aplikacji – albo przez pisanie kodu JavaScript i wykonywanie go w aplikacji natywnej, jak Adobe PhoneGap, React Native lub przez kompilowanie kodu C# lub Java na natywny kod, np. Xamarin. Należy jednak pamiętać, że szybkość działania takich aplikacji może być niezadowalająca, szczególnie w przypadku tanich telefonów, które nie mają dużo pamięci lub mocy obliczeniowej.

Niezależnie od wybranej technologii hybrydowej, tylko część aplikacji będzie w rzeczywiście hybrydowa. W niektórych przypadkach będziemy zmuszeni część elementów aplikacji programować natywnie.

Warto wiedzieć, że istnieją rygorystyczne ograniczenia możliwości projektowania aplikacji mobilnych w zależności od wybranego rozwiązania. Ograniczają wynikają z tego iż programiści muszą korzystać z predefiniowanych elementów danej technologii, które mogą być uruchomione na danym systemie operacyjnym (Android/iOS)

Plusy i minusy aplikacji internetowych

Aplikacja htmlGwałtowny rozwój internetu, udowadnia nam, że technologie internetowe mogą być wykorzystywane w wielu sytuacjach gdzie programiści będą dostosowywać się do nowego stanu rzeczy, i w ten sposób mogą tworzyć nowy trend. Aplikacje internetowe są tego przykładem. Są to zasadniczo strony internetowe zaprojektowane w ten sposób by wyglądały jak aplikacje mobilne.

Podczas gdy aplikacje natywne bezpośrednio współdziałają z systemem operacyjnym, aplikacje internetowe współdziałają z przeglądarką. To poszerza grupę potencjalnych odbiorców, pozwalając aplikacji działać na prawie każdym urządzeniu, o ile posiada przeglądarkę internetową.

Odpowiednio zaadaptowany HTML pozwala aplikacjom łatwo dopasować się do dowolnego rozmiar i rozdzielczości ekranu. Jednak te aplikacje pozostawiają wiele do życzenia w odniesieniu do wydajności, zwłaszcza na urządzeniach mobilnych. Wygoda korzystania z aplikacji internetowej zależy od mocy obliczeniowej telefonu użytkownika.

Plusy i minusy aplikacji natywnych

Aplikacje typowo natywne mają znacznie większą wydajność w stosunku do odpowiedników aplikacji internetowych. Dostępność do danych jest dużo szybsza, a sama aplikacja jest w stanie uzyskać pełen dostęp do możliwości urządzenia.

Niestety, natywna aplikacja działa tylko w jednym systemie operacyjnym. Aplikacja opracowana dla systemu Windows musi zostać przebudowana na Androida, iOS a nawet na nowsze wersje systemu Windows, aby zachować zgodność.

Zatrudnienie zespołu programistów dla każdego systemu operacyjnego jest kosztowną decyzją i nie jest to możliwe dla wielu firm (dlatego dużo aplikacji firmowych dostępnych jest tylko dla jednej platformy).

Postawić na aplikację internetową, natywną lub hybrydową?

Wybór między aplikacją internetową, natywną lub hybrydową w dużej mierze zależy od potrzeb Twojego projektu. Koszt i niezawodność to na pewno nie jedyne czynniki, którymi należy się kierować. Oto trzy pytania, które warto sobie zadać zanim dokonamy wyboru:

Czy aplikacja bazuje na funkcjonalnościach urządzenia?
Telefony komórkowe mają wiele czujników, funkcji takich jak akcelerometry, żyroskopy, odbiorniki GPS, kamery i inne. Jeśli projektujesz aplikację, która będzie korzystać z tych funkcji, aplikacja natywna najlepiej spełni Twoje oczekiwania.
Czy aplikacja wymaga zaawansowanych animacji i interakcji?
Gry internetowe mogą działać dobrze na komputerach stacjonarnych, ale na urządzeniach mobilnych są praktycznie bezużyteczne. Gry są jedynymi z najbardziej wymagających procesów które obciążają urządzenie. Pisanie gier natywnie gwarantuje płynność działania.
Czy aplikacja ma jedynie wyświetlać dane?
Projekty, które opierają się na wyświetlaniu informacji z powodzeniem mogą być obsługiwane przez aplikacje internetowe. Dzięki wyborowi tej technologii można w łatwy sposób skalować aplikację na wiele urządzeń przy zachowaniu funkcjonalności i przyzwoitej wydajności.

Aplikacje mobilneNatywne aplikacje bardziej angażują odbiorców, ale aplikacje internetowe są znacznie tańsze i łatwiejsze do wdrożenia w szerokiej gamie urządzeń, o ile cel aplikacji jest prosty. Im bardziej skomplikowany projekt, tym mniej korzystne będą technologie hybrydowe, zwłaszcza jeśli chodzi o Xamarin, który bardzo dobrze sprawdza się przy aplikacjach typowo biznesowych wymagających niezawodnego działania.

Rozwiązania hybrydowe mogą kiedyś być jedynym słusznym wyborem w przypadku tworzenia aplikacji mobilnych, ale obecnie bez dedykowanych programistów dla każdego systemu operacyjnego trudne będzie nam stworzyć wysoce zaawansowaną aplikację o tych samych funkcjonalnościach na każde urządzenie.

Przy projektowaniu nowej aplikacji mobilnej ważne jest, aby pamiętać o tych różnicach.

27
Paź

Jak używać breadcrumbs?

Wielu internautów oczekuje od stron internetowych, że będa miały wdrożone „breadcrumbs”.

Te z pozoru niezauważalne elementy nawigacji dają nam uproszczoną możliwość przeglądania serwisów www bez utraty świadomości gdzie się znajdujemy.

Niektóre breadcrumbs wpływają pozytywnie na odbiór stron przez użytkowników (UX), gdzie z kolei inne, powodują komplikację w nawigowaniu po serwisie www. Zbadajmy zatem jak breadcrumbs wpływa na UX oraz optymalizację SEO.

Czym są breadcrumbs?

Breadcrumbs – czyli okruszki chleba. Termin ten, został zaczerpnięty z bajki braci Grimm o Jasiu i Małgosi. Macocha głównych bohaterów porzuciła je w lesie mając nadzieję, że nigdy więcej ich nie zobaczy. Inteligentny Jaś jednak zostawiał po sobie ślad używając okruszków chleba. W ten sposób stworzył ścieżkę dzięki której dzieci mogły znaleźć drogę powrotną do domu. Okruszek po okruszku. Breadcrumbs na stronach internetowych opisują, ścieżkę “podróży” użytkownika.

Wielu programistów tworzy serwisy internetowe używając strony głównej jako punkt wyjściowy. Strona główna z kolei linkuję do kolejnych podstron takich jak np. strona kontaktowa, strona “o nas”, czy do podstron poszczególnych produktów. Każda z tych stron ma swoje miejsce w hierarchii serwisu. Breadcrumbs pomaga zwizualizować ten schemat i umożliwia poruszanie się wewnątrz niego. Nawigacja za pomocą breadcrumbs może wyglądać następująco:

Strona główna > Elektronika > AGD i RTV > TelewizorySony Trinitron 27

Jeżeli klientów nie interesuje telewizor sony, ale chcą kontynuować poszukiwania swojego upragnionego telewizora to jednym kliknięciem mogą dostać się się do kategorii zawierającej wszystkie telewizory. Natomiast gdy okaże się, że potrzebujemy czegoś więcej z działu elektroniki to wystarczy ponownie jedno kliknięcie i przenosimy się do sekcji związanej z elektroniką. Intuicyjne, prawda?

Nawigowanie po breadcrumbs zapewnia użytkownikom pewien kontekst, dzięki czemu mogą odpowiedzieć sobie na pytania:

  • Gdzie obecnie jestem w odniesieniu do całej witryny?
  • Jakie mam dostępne wybory do poruszania się po stronie? Breadcrumbs sprawiają, że każda sekcja jest łatwa do znalezienia.
  • Czy chcę tam przejść? Breadcrumbs sugerują eksplorowanie stron internetowych, zachęcając użytkowników do przechodzenia do kolejnych miejsc.

Korzyści ze stosowania Breadcrumbs

Breadcrumbs ułatwia nawigację po witrynach internetowych w celu ulepszenia wrażeń użytkowników (UX) w następujący sposób:

  • Odwiedzający wykonują mniej kroków.
    Jeśli użytkownicy poszukują ciekawych treści a nie chcą opuszczać strony na której się znajdują mogą użyć breadcrumbs w celu pozyskania kolejnych treści (zamiast np. wrócić do strony głównej).
  • Breadcrumbs wyjaśniają nawigowanie po stronie.
    Często użytkownicy nie są pewni, czego szukają, ale czują, że będą wiedzieli, kiedy to zobaczą. Dopóki mogą przejść płynnie przez poszczególne pozycje strony internetowej, każdy krok przybliża ich do celu. Jeśli muszą pójść w danym kierunku, mogą stracić ścieżkę by następnie zdecydować, że jednak nie są zainteresowani danym obszarem strony. Breadcrumbs pomaga odnaleźć drogę powrotną.
  • Efektywnie wykorzystują przestrzeń.
    Breadcrumbs to prosty tekst z poziomymi liniami, które nie przyczyniają się do przeciążenia treści na stronach internetowych.

Kiedy używać breadcrumbs?

Decydując się na użycie breadcrumbs musisz pamiętać, że Twoja strona musi być podzielona na sekcje i podsekcje. Poszczególne podstrony powinny być zgrupowane według powiązanych kategorii, dzięki czemu zadbamy o poprawne UX. Breadcrumbs nie są przydatne przy w witrynach, których podstrony nie są w żaden sposób zgrupowane, np blogi z niepowiązanymi tematami itd.

Typy breadcrumbs

Breadcrumbs może określać pozycję, ścieżkę lub charakterystykę strony:

  • Pozycja.
    Jeśli strony internetowe posiadają więcej niż dwa poziomy, breadcrumbs wskazują położenie każdej podstrony w stosunku do pozostałych. Na przykład jeśli użytkownicy wyszukują „dywan w kolorze turkusowym” i wybiorą link, który przeniesie ich do określonego produktu, mogą zdać sobie sprawę, że chcieliby zobaczyć inne produkty tego samego sprzedawcy. Być może nigdy nie byli na innych podstronach w serwisie, a breadcrumbs sugerują, że mogą poznać kolejne elementy serwisu. Każdy link tekstowy breadcrumbs przenosi użytkowników o jeden poziom wyżej.
  • Ścieżka nawigacyjna.
    Pokazuje, że każdy krok użytkownika przybliżył go do celu. Jeśli chodzi o historię ścieżki po której poruszał użytkownik, breadcrumbs stają się mniej użyteczne jeśli użytkownicy przejdą na stronę bezpośrednio z wyszukiwarki.
  • Elementy zgrupowane według właściwości.
    Serwisy ecommerce często używają tego rodzaju ścieżki nawigacyjnej do grupowania podobnych produktów.

Twórcy stron internetowych mogą mieszać powyższe typy breadcrumbs aby ułatwić odwiedzającym nawigowanie. Na przykład ścieżka nawigacji dla witryny hipermarketu może wyglądać następująco:

Strona główna > Ubrania > Odzież Damska > Piżamy i Szlafroki > Koszulki Spodenki > Koszulki z długim rękawem

Pierwsze trzy kategorie są oparte na lokalizacji. Ostatnie trzy elementy są podzielone ze względu podobne cechy charakterystyczne dla każdego poziomu.

Breadcrumbs a SEO

Od kiedy wyszukiwarki nieustannie rozwijają swoje reguły określające pozycję stron internetowych w wynikach wyszukiwania to, specjaliści od SEO nie są zgodni jak duże znaczenie ma stosowanie breadcrumbs w optymalizacji stron www pod kątem wyszukiwarek. Jednakże większość z nich zgadza się, że breadcrumbs może pomóc. Należy pamiętać, że ich podstawową funkcją jest poprawa UX.

19
Paź

„Coming Soon Page”. Dobre praktyki.

Co należy zrobić, gdy strona internetowa jest w budowie i nie jesteś jeszcze gotów na jej uruchomienie?

Niezależnie od tego, czy projektujesz stronę prezentującą nowy produkt lub aplikację, czy po prostu tworzysz nową wersję swojej strony internetowej warto stworzyć “Coming Soon Page”. Dobrze przygotowana “strona w budowie” może pomóc Ci zdobyć potencjalnych klientów. Zajawka strony być dobrym narzędziem promocyjnym, marketingowym dla niektórych serwisów internetowych. Dobrze zaprojektowany Landing Page może przyciągnąć uwagę dla nowej aplikacji lub produktu – jest to dość popularne rozwiązanie.

Kilka porad…

To czego potrzebujesz by stworzyć efektowne “Coming Soon Page” to nie tylko zestaw kolorów czy ładnych zdjęć. Potrzebujesz takich komponentów, które będą potrafiły zaangażować odwiedzających użytkowników.

Najlepsze tego typu strony nie są skomplikowane, zawierają tylko jedną rzecz którą chcemy by wykonali nasi odwiedzający. Nie twórz zbyt wielu opcji. Pamiętaj, że Landing Page to tylko zwiastun Twoje docelowej strony internetowej.

counter

Pomyśl o atrakcyjnych graficznie elementach jak licznik, który będzie odliczać czas do uruchomienia pełnej wersji Twojej strony lub np. rozpoczęcia sprzedaży danego produktu. Pamiętaj by czas który odliczasz miał pokrycie w rzeczywistości!

landing page formBardzo często stosuje się formularz, za pomocą którego zbieramy adresy e-mail zainteresowanych nami osób. Dzięki czemu po uruchomieniu właściwej wersji strony internetowej możemy poinformować o tym fakcie naszych potencjalnych klientów. Konwersja w tym przypadku jest wyjątkowa wysoka.

Tworząc “Coming Soon Page” używaj kolorystyki, typografii czy zdjęć, które są ściśle powiązane z Twoja marką. Użytkownicy muszą czuć, że Landing Page jest elementem Twojej docelowej strony a nie jej odrębnym tworem.  

Dołącz logo i krótki opis tego czym się zajmujesz. W przypadku nowej marki lub wprowadzenia produktu użytkownicy potrzebują wystarczających informacji, aby wiedzieć, że są zainteresowani tym, co oferujesz.

Jeżeli potrzebujesz pomocy w zaprojektowaniu strony internetowej służymy pomocą!