UX Design na stronach opartych na Bootstrap 5
UX (User Experience) design to kluczowy aspekt tworzenia nowoczesnych stron internetowych. Framework Bootstrap 5, jako jedno z najpopularniejszych narzędzi do budowy responsywnych stron, oferuje wiele komponentów ułatwiających projektowanie UI (User Interface). Jednak samo użycie Bootstrapa nie gwarantuje dobrej użyteczności strony. Poniżej omówimy zasady projektowania UX w Bootstrapie 5 oraz przedstawimy dwa przykłady – stronę o złym UX oraz stronę o dobrym UX.
Zasady dobrego UX w Bootstrap 5
- Czytelność i hierarchia treści – Teksty powinny być dobrze widoczne, nagłówki wyraźnie oddzielone od treści.
- Spójność interfejsu – Elementy UI powinny mieć jednolitą stylistykę i logiczny układ.
- Odpowiednie odstępy i marginesy – Unikanie zbyt małych odstępów między elementami poprawia czytelność.
- Responsywność – Strona musi poprawnie wyświetlać się na różnych urządzeniach.
- Kontrast i kolorystyka – Tekst powinien być czytelny na tle strony, a przyciski dobrze widoczne.
- Intuicyjna nawigacja – Menu i przyciski powinny być łatwe do znalezienia i używania.
Przykład złego UX (zły kod HTML)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zły UX</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background: #ff0000; color: #000; font-size: 8px; }
.container { margin: 0; padding: 5px; }
.btn { background: yellow; color: black; padding: 2px; }
</style>
</head>
<body>
<div class="container">
<h1 style="color: blue; text-align: center;">Witamy na stronie</h1>
<p>To jest nieczytelna strona z chaotycznym designem.</p>
<button class="btn">Kliknij mnie</button>
</div>
</body>
</html>Problemy:
- Jaskrawe kolory tła i tekstu utrudniają czytanie.
- Zbyt mały rozmiar czcionki.
- Brak odstępów między elementami.
- Przyciski są małe i trudne do kliknięcia.
Przykład dobrego UX (dobry kod HTML)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dobry UX</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background: #f8f9fa; color: #212529; font-size: 16px; }
.container { max-width: 800px; margin: auto; padding: 20px; }
.btn { background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; }
</style>
</head>
<body>
<div class="container text-center">
<h1 class="mb-4">Witamy na naszej stronie</h1>
<p>Nasza strona oferuje nowoczesny design, przejrzysty interfejs i łatwą nawigację.</p>
<button class="btn">Kliknij tutaj</button>
</div>
</body>
</html>Poprawione elementy:
- Stonowane kolory poprawiają czytelność.
- Odpowiednia wielkość czcionki zapewnia komfort czytania.
- Odpowiednie odstępy między elementami poprawiają przejrzystość.
- Przyciski są wyraźne, estetyczne i łatwe do kliknięcia.
Przykład formularza ze złym UX
<form class="container mt-3">
<label>Email:</label>
<input type="text" class="form-control" style="width: 200px; font-size: 10px;">
<br>
<label>Hasło:</label>
<input type="password" class="form-control" style="width: 150px; font-size: 10px;">
<br>
<button class="btn btn-danger">Wyślij</button>
</form>Problemy:
- Małe pola formularza, utrudniające wprowadzanie danych.
- Brak etykiet z wyraźnym opisem.
- Zbyt mała czcionka w polach.
- Czerwony przycisk może sugerować błąd lub niebezpieczne działanie.
Przykład formularza z dobrym UX
<form class="container mt-3">
<div class="mb-3">
<label for="email" class="form-label">Adres e-mail</label>
<input type="email" id="email" class="form-control" placeholder="Wpisz swój email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Hasło</label>
<input type="password" id="password" class="form-control" placeholder="Wpisz swoje hasło">
</div>
<button class="btn btn-primary">Zaloguj się</button>
</form>Poprawione elementy:
- Odpowiednio duże pola tekstowe.
- Czytelne etykiety.
- Placeholdery pomagające w poprawnym wypełnianiu formularza.
- Kolorystyka dostosowana do intuicyjnego użycia.
Podsumowanie
Bootstrap 5 oferuje szeroki zestaw narzędzi do tworzenia responsywnych stron, ale odpowiednie podejście do UX jest kluczowe dla sukcesu projektu. Poprawne stosowanie kolorystyki, typografii i struktury strony znacznie wpływa na wygodę użytkownika i końcowy odbiór witryny.
3 marca 2025
13
