Długie nazwy w interfejsie: projektowanie dla treści, która nie chce się zmieścić

„Tu będzie krótki tytuł” — obiecuje makieta. Potem przychodzi prawdziwa nazwa usługi i karta dostaje zadyszki. Dobry interfejs powinien pomieścić długie tytuły, nazwy firm i adresy dokumentów bez zmniejszania liter do rozmiaru przypisu w umowie. Najpierw ustal, co można skrócić, co powinno się zawijać i czego klient potrzebuje w całości. Równa wysokość kafelków nie jest ważniejsza od czytelnego warunku oferty.

Najlepszą próbą jest zastąpienie idealnych tekstów z projektu prawdziwą, trudniejszą treścią. Weź najdłuższe nazwy, kilka wersji językowych i adres bez wygodnych miejsc podziału. Sprawdź menu, formularz, kartę oraz nagłówek na telefonie. Poniżej znajdziesz sposób opisania zasad dla redakcji i wykonawcy, aby każda kolejna publikacja nie wymagała negocjowania z szerokością przycisku.

Zbierz treści, które naprawdę mają się pojawić

Nie zaczynaj od losowo długiego ciągu liter. Potrzebujesz różnych rodzajów trudności: wielowyrazowej nazwy, pojedynczego długiego słowa, adresu internetowego, tytułu z dopiskiem i etykiety w innym języku. Każdy przypadek może wymagać innego sposobu prezentacji. Jeden test nie zastąpi pozostałych.

W hipotetycznym studiu nazwa „Projektowanie stron dla firm świadczących usługi specjalistyczne” może pasować do nagłówka, ale w menu potrzebować krótszej wersji. Nazwy przedsiębiorstwa wpisanej przez klienta nie można natomiast dowolnie przeredagować. Projekt powinien rozróżniać treść firmową, którą kontroluje redakcja, od danych, których znaczenie należy zachować.

Zapisz dla każdego miejsca cel tekstu i dopuszczalną zmianę. Nagłówek objaśnia temat, etykieta zapowiada działanie, a identyfikator pozwala rozpoznać konkretny dokument. Skrócenie ostatniego może usunąć właśnie ten fragment, którym różni się od innego. Ważniejsza od długości jest funkcja informacji.

Połącz ten przegląd z typografią strony premium. Krój, szerokość kolumny i rytm wierszy wpływają na kompozycję, ale nie powinny prowadzić do ukrywania treści z rozpędu. Dobrze dobrany system radzi sobie z różnicami, zamiast wymagać, żeby wszystkie słowa miały podobny charakter i rozmiar.

Ustal, kiedy skrót redakcyjny jest uczciwy

Krótsza nazwa w menu może poprawić orientację, jeśli pozostaje zgodna z pełnym tytułem i nie zmienia zakresu. „Strony usługowe” może być czytelniejszym odnośnikiem niż rozbudowana nazwa oferty, pod warunkiem że kontekst jasno wskazuje, co się pod nią znajduje. Samo „Więcej” nie rozwiązuje problemu — usuwa informację.

Przygotuj oddzielne pola na pełny tytuł i nazwę nawigacyjną, jeżeli system tego wymaga. Nie każ redakcji skracać głównego tytułu artykułu tylko dlatego, że źle wygląda w małej karcie. W procesie publikacji treści warto opisać, gdzie wolno użyć krótszej wersji i kto sprawdza jej zgodność.

W menu mobilnym porównaj nazwy obok siebie. Dwa skróty mogą stać się niemal identyczne, choć pełne tytuły wyraźnie się różnią. Osoba przeglądająca ofertę powinna umieć wybrać właściwy cel bez otwierania obu stron na próbę.

Nie stosuj skrótu jako sposobu ukrycia niewygodnego warunku. „Konsultacja” i „Konsultacja po wstępnej analizie dokumentów” mogą obiecywać inny zakres przygotowania. Jeśli warunek wpływa na wybór, powinien pozostać czytelny przy odnośniku albo w jego bliskim otoczeniu. Estetyczna oszczędność miejsca nie powinna tworzyć biznesowego niedomówienia.

Pozwól układowi rosnąć razem z tekstem

Tytuł karty może zajmować jeden, dwa albo kilka wierszy. Jeśli pojemnik ma sztywno ustawioną wysokość, część tekstu może nałożyć się na przycisk lub zniknąć. Poproś wykonawcę o próbę z dłuższą treścią i powiększeniem. Oceniaj całą kartę, łącznie z kolejnym elementem pod nią.

Nie każda nierówna wysokość jest problemem. W wielu listach naturalny przepływ treści daje lepszy wynik niż idealnie wyrównane dolne krawędzie. Jeśli wspólna wysokość ma istotne uzasadnienie, ustal, jak zachowa się najdłuższy element. W przeciwnym razie projekt będzie działał do chwili pierwszego naprawdę opisowego tytułu.

Przyciski także potrzebują miejsca na dłuższą etykietę. Sprawdź zawijanie, odstępy i ikonę, jeśli występuje obok tekstu. Słowo nie powinno wypychać kontrolki poza ekran ani przykrywać sąsiedniej akcji. Wielkość napisu ma służyć czytaniu; nie traktuj automatycznego zmniejszania jako uniwersalnego ratunku.

W porównaniu dwóch usług dłuższy warunek może zwiększyć wysokość jednego wiersza. Zachowaj jednak właściwe relacje między nagłówkami a wartościami. Usunięcie fragmentu wyłącznie dla równego układu może odebrać porównaniu sens, zwłaszcza gdy właśnie ten warunek odróżnia zakresy.

Oddziel zawijanie od zmiany wartości

Właściwość overflow-wrap opisana przez MDN pozwala przeglądarce łamać zbyt długi ciąg, aby nie wychodził poza obszar wiersza. To zachowanie prezentacji, nie polecenie zmiany samej treści. Warto rozważyć je dla adresów lub innych ciągów bez wygodnych miejsc podziału.

Poproś o sprawdzenie kopiowania. Adres widoczny w kilku wierszach powinien po skopiowaniu nadal prowadzić do właściwego miejsca. Nie dodawaj do danych przypadkowych spacji tylko po to, żeby zmieściły się w projekcie. Podobnie identyfikator dokumentu musi pozostać rozpoznawalny, nawet jeśli sposób jego wyświetlenia jest dopasowany do szerokości ekranu.

Nie każdy tekst należy łamać w dowolnym miejscu. Przy nazwach własnych, liczbach i jednostkach dobierz reguły do znaczenia. Kompozycję warto sprawdzić na faktycznych danych, a nie na samym ciągu powtarzanych znaków. To, co technicznie mieści się w prostokącie, może nadal być trudne do przeczytania.

Przy linkach zewnętrznych często lepiej wyświetlić zrozumiałą nazwę celu niż pełny techniczny adres z parametrami. Zachowaj właściwy odnośnik, a pełną wartość pokaż tam, gdzie rzeczywiście jest potrzebna do skopiowania lub weryfikacji. Tak można ograniczyć długość bez utraty funkcji.

Wielokropek musi mieć zasady

Skrócenie tekstu po kilku wierszach bywa przydatne w liście artykułów, jeśli pełna treść jest łatwo dostępna po przejściu. Może być jednak mylące w warunku oferty, nazwie pliku czy komunikacie błędu. Zanim użyjesz wielokropka, ustal, co znika i jak odbiorca odzyska całość.

Nie polegaj wyłącznie na podglądzie po najechaniu. Osoba na telefonie potrzebuje innego sposobu, a użytkownik klawiatury nie powinien odkrywać go przypadkiem. Jeśli pełny tekst jest istotny, rozważ zwykłe rozwinięcie albo osobny opis. Akordeon treści może być jedną z możliwości, o ile jego tytuł zapowiada to, co ukryto.

Sprawdź podobne nazwy z różnicą na końcu. „Program warsztatu — wariant dla zespołu…” i drugi plik o podobnym początku mogą wyglądać identycznie po ucięciu. W takiej sytuacji warto wyeksponować rozróżniający fragment lub dodać oddzielne oznaczenie. Mechanizm skracania nie wie, która część ma największe znaczenie. Gdy problem wraca w całym katalogu, przejrzyj nazwy rodziny produktów i usług. Rozróżnienie oferty warto zapisać w jej nazewnictwie, zanim kolejne widoki zaczną je skracać.

Zapisz osobne zasady dla poszczególnych rodzajów treści zamiast jednej dla całego serwisu. Skrót opisu w karcie może być poprawny, a taki sam skrót odpowiedzi formularza już nie. Redakcja powinna wiedzieć, kiedy komponent sam ograniczy widok i gdzie trzeba osobno ustalić sposób pokazania całości.

Sprawdź ustawienia czytelnika i inne języki

W3C objaśnia kryterium dotyczące odstępów tekstu, które sprawdza odporność treści na określone zmiany odstępów bez utraty informacji lub funkcji. Nie nakazuje ono autorowi ustawienia tych wartości jako wyglądu domyślnego. W odbiorze chodzi o zachowanie strony, gdy odbiorca dopasuje sposób czytania.

Przygotuj próbę według wartości wskazanych w kryterium i sprawdź menu, karty oraz formularze. Stała wysokość, która działała przy ustawieniach autora, może wtedy uciąć ostatni wiersz. Zapisz znalezione problemy przy konkretnych elementach. Ogólne stwierdzenie „strona responsywna” nie odpowiada na pytanie o ten przypadek.

W wersjach językowych strony użyj prawdziwych tłumaczeń. Nie przyjmuj jednego procentu wydłużenia dla wszystkich tekstów i języków. Inaczej zachowa się krótka etykieta, inaczej tytuł z nazwą własną i inaczej zapis w innym systemie pisma.

Sprawdź również imię, nazwę firmy i opis wpisywane w formularzu kontaktowym. Wygodne pole do wpisania nie wystarczy, jeśli podsumowanie albo wiadomość po wysłaniu później ucinają tę samą wartość. Odporność na długie dane powinna obejmować całą drogę zadania.

Komunikat błędu potrzebuje miejsca na wyjaśnienie

Błąd często wymaga dłuższego tekstu niż stan początkowy. „Uzupełnij pole” jest krótkie, ale może nie wystarczyć, jeśli problem dotyczy formatu załącznika albo kilku powiązanych danych. Przygotuj przykład rzeczywistego wyjaśnienia i sprawdź, czy mieści się w logicznym miejscu, nie zasłaniając następnego pola.

W hipotetycznym formularzu można poprosić o opis problemu i dokument. Jeśli plik nie jest odpowiedni, klient powinien dowiedzieć się, co zmienić i czy wprowadzone informacje pozostały zapisane w formularzu. Taki komunikat może mieć kilka zdań. Nie skracaj go automatycznie do jednego wiersza, jeżeli usuwa to instrukcję potrzebną do dokończenia zadania.

Sprawdź również zestaw kilku błędów naraz. Informacja nad formularzem i opis przy polu powinny nadal należeć do właściwych elementów. Dłuższa treść może przesunąć kontrolki, ale nie powinna odebrać orientacji. Osoba korzystająca z klawiatury musi móc wrócić do miejsca poprawki bez szukania, dokąd zniknął aktualny wybór.

W odbiorze przeprowadź próbę aż do skutecznego poprawienia danych. Samo pojawienie się tekstu nie potwierdza, że wyjaśnienie jest czytelne i wystarczające. Jeśli osoba ponawia tę samą pomyłkę, przyczyną może być język komunikatu, układ albo brak istotnego warunku. Zapisz konkretną przeszkodę zamiast zmniejszać czcionkę dla odzyskania miejsca.

Nazwy plików i wersji wymagają rozpoznawalnej różnicy

Długa nazwa dokumentu bywa potrzebna, bo odróżnia program, język, datę i wariant. Przy projektowaniu listy ustal, które informacje powinny być osobnymi polami, zamiast sklejać wszystko w jeden ciąg. Tytuł, wersja i język mogą mieć własne miejsce, dzięki czemu całość pozostaje czytelna również na telefonie. Dla większej kolekcji rozwiń te reguły w centrum materiałów z wersją i zastosowaniem pliku, zamiast zostawiać całą identyfikację w nazwie.

Nie zmieniaj rzeczywistej nazwy pobieranego pliku wyłącznie po to, aby skrócić etykietę. Prezentacja i zapis dokumentu mogą pełnić różne funkcje. Jeśli pokazujesz przyjazny tytuł, zadbaj, aby po pobraniu odbiorca nadal rozpoznawał właściwy materiał. Inaczej krótki opis na stronie i techniczna nazwa w folderze wyglądają jak dwa różne dokumenty.

W małym ćwiczeniu przygotuj dwa materiały o podobnym początku nazwy i innej wersji. Poproś o pobranie wskazanego wariantu oraz rozpoznanie go po zapisaniu. Jeśli trzeba otwierać oba pliki, żeby ustalić różnicę, popraw sposób oznaczania. Układ powinien wspierać wybór, a nie przerzucać go do kolejnego programu.

Sprawdź ten sam przypadek przy powiększonym tekście i bez dostępu do opisu w sąsiedniej kolumnie. Ważne znaczenie nie może zależeć wyłącznie od dokładnego wyrównania. Dzięki takiej próbie projektujesz dla rzeczywistych dokumentów i kolejnych aktualizacji, nie tylko dla pierwszej wygodnej próbki z makiety.

Zostaw redakcji reguły i przykłady do dalszego użycia

Przygotuj mały zestaw trudnych treści do powtarzania po zmianie komponentów. Nie musi być ogromny. Powinien reprezentować różne problemy: długi wyraz, wielowyrazową nazwę, adres, tłumaczenie i ważny warunek. Każdy przykład powinien mieć oczekiwany wynik, żeby nowa osoba wiedziała, co sprawdza.

Do odbioru strony internetowej dołącz próbki widoków oraz reguły skracania. Jeśli istnieje limit redakcyjny, objaśnij jego cel i sposób postępowania przy uzasadnionym wyjątku. Limit nie powinien maskować błędu układu ani zmuszać do publikacji niejasnego skrótu.

W edytorze sprawdź także podgląd z gotową treścią przed publikacją. Jeżeli limit dotyczy wyłącznie widoku, nie przedstawiaj go jako zakazu zapisania dłuższej nazwy bez wyjaśnienia. Redaktor powinien widzieć skutek i wiedzieć, jak przygotować uzasadniony wyjątek. W przeciwnym razie będzie poprawiał tekst metodą kolejnych publikacji, zamiast ocenić go spokojnie wcześniej.

Przeglądaj problemy po rzeczywistych zmianach: nowym typie karty, innym kroju pisma, dodatkowym języku lub przeprojektowaniu menu. Nie trzeba powtarzać całego zestawu po korekcie przecinka. Warto jednak zachować przykłady, które wcześniej ujawniły utratę treści, aby ten sam błąd nie wrócił po następnej modernizacji.

Jeśli twoja strona dobrze wygląda tylko przy krótkich tekstach, zobacz zakres Aeneia Design.