Pierwszy watek w tym dziale :)
I chcialbym zaczac dyskusje o tym, czy z punktu widzenia usability, wszystkie linki na stronie powinny posiadac atrybut text-decoration: underline? Jak to sie ma do "widocznosci" takich linkow, czy majac do czynienia z podkreslonym tekstem - zawsze - instynktowanie uznajemy, iz jest to link? Czy istnieja odstepstwa od tej reguly (np. na 4programmers nie wszystkie linki posiadaja podkreslenie)
Według mnie, linki pokolorowane na zielono wyglądają dobrze, widać że to jest link. Nie zawsze musi być underline.
Na pewno nie jest tak, że WSZYSTKIE linku MUSZĄ być podkreślone. W przypadku pionowych menu nawigacyjnych podkreślenie nie dość, że bywa zupełnie zbędne, to jeszcze może wprowadzić potężną dawkę wizualnego zagracenia (ang. visual clutter ;) ).
Podkreślanie linków jest o tyle dobre, że jest łatwo zauważalne przez ludzi mających trudności z postrzeganiem barw. Ale to akurat można załatwić i samym kolorem, wbrew pozorom. Jeśli różnica w nasyceniu barwy jest wystarczająca, to nawet ludzie nierozróżniający kolorów ją zobaczą.
Podkreślenie należy do najsilniejszych wskazówek mówiących, że dany tekst jest linkiem. Ale czy to faktycznie najsilniejsza wskazówka na współczesnych, graficznych ekranach? Myślę, że nie. Wyobraź sobie, że masz dwa teksty napisane w nieznanym Ci języku i wiesz, że dokładnie jeden z nich zawiera link. Pierwszy z tekstów zawiera ciąg kilku słów udekorowanych podkreśleniem. Drugi z tekstów zawiera ciąg kilku słów napisanych na niebiesko. Jakbyś miał strzelać i nie mógłbyś użyć klawiatury ani myszki, to który z fragmentów uznałbyś za link? Coś mi się wydaje, że jest spora szansa, że wybrany zostałby ten drugi -- pokolorowany. A nie podkreślony.
A co do odstępstw od tej reguły, to w miarę normalne jest, że podkreślone są wstawione elementu tekstu (<ins>). Czasami też są pogrubione.
Warto pamiętać o tym, że podkreślenie nie musi być zdefiniowane przez text-decoration. Większe możliwości zapewnia np. border-bottom. Za pomocą tej własności można m.in. sprawić, by podkreślenie było bardziej stonowane, delikatniejsze. Pozwala to odśmiecić wizualnie stronę.
Łap tu przeznaczony dla designerów artykuł o stylowaniu linków: http://www.andyrutledge.com/styling-text-links.php .
Tak w ogóle to nie ulega wątpliwości, że jeśli chodzi o rozpoznawalność, to użycie podkreślenia oraz innego koloru (najlepiej niebieskiego, ale to już od dawna nie jest żaden mus) stanowi najlepsze rozwiązanie dla linków.
@bswierczynski: jasne, zgadzam sie, w dodawanie podkreslenia w pionowym menu jest niepotrzebne, wrecz - zbedne. A tutaj: Delphi ? Mamy nagromadzenie linkow, czy jest to czytelne?
Z drugiej strony - linki w postach na forum. Czy uwazasz, ze linki w postach nie powinny posiadac podkreslenia? Czy nie zlewa sie to z wyroznieniem instrukcji jezyka - np.:
http://foo.com
http://foo.com
Zobacz jak grubo i ohydnie wygląda ten tekst w "Delphi"... Znacznie utrudnia czytanie, podkreślenia wszędzie po prostu rozpraszają. W tym wypadku widać że to jest linkowisko - można odróżnić po kolorze. Nie ma sensu tego dodatkowo wyróżniać.
Tak samo wyróżnienie instrukcji języka i link. Mówisz że się zlewa, imo to wina bardziej stylu tego podkreślenia. Linki są dobrze wyróżnione, przynajmniej ja dzięki zastosowaniu Couriera odróżniam co jest czym. Tak samo te podkreślenia nazw subfor - widać że to są linki, są takim samym kolorem jak tytuły głównych działów - czyli można w nie kliknąć. Oprócz tego ikonka też przekonuje że jest to jakiś link.
http://4programmers.net/Delphi
http://4programmers.net/Delphi
i to mi się właśnie nie podoba - linki i ucha wyglądają bardzo podobnie
Ja nie mam problemu z rozpoznaniem, w każdym razie jeśli niektórych myli, to zamiast brzydkiego underline można po prostu zmienić wygląd jednego z elementów.
@Adam Boduch:
Ja nie poświęciłem tyle czasu na myślenie nad tym tematem (i sprawdzenie różnych rozwiązań) jak Ty. Na tę chwilę, z tego co wymyśliłem/zaobserwowałem, muszę powiedzieć, że stylowanie linków tutaj nie za bardzo mi się podoba. Nie żebym się bał powiedzieć, że jest tragiczne -- nie uważam, że jest bardzo źle. Ale nie jest też za dobrze.
Jeśli chodzi o fragmenty kodu pisane inline, to na pewno spróbowałbym uniknąć pisania tego kodu na zielono. Sprawdziłbym jakiś odcień szarości. Może nawet ciemnoszary kolor. Jestem przekonany, że kontrast będzie wystarczający i że łatwo będzie znaleźć instrukcje wewnątrz tekstu. Tak naprawdę to często wystarczy jedynie zastosowanie czcionki o stałej szerokości, bez żadnej zmiany koloru. Couriera bardzo łatwo odróżnić od takiego Ariala, szczególnie gdy mamy chociaż dwie litery. W przypadku kodu inline nie chodzi o to, by fajnie to wyglądało czy nawet nie aż tak bardzo o to, by łatwo można było wyszukać w tekście identyfikatory. Chodzi o to, żeby czytając tekst widzieć, co jest identyfikatorem, a co nie.
Ja nieraz stosuję jedynie wyróżnienie krojem pisma. Często modyfikuję też stopień pisma (tj. "rozmiar fontu"), bo Courier w porównaniu do innych krojów bywa za wielgaśmy. Nieraz dam troszkę inny kolor (nawet bardzo ciemny szary -- to ledwo zauważalne), a nieraz nie. Zobacz zresztą jak to się robi w książkach. Oni tam naprawdę rzadko używają koloru do oznaczenia identyfikatorów w tekście. Nie pamiętam kiedy coś takiego widziałem. Tutaj mamy nieco inne medium, ale przykład z książkami czy publikacjami papierowymi poświadcza, że kolor nie jest aż tak superniezbędny.
Tak czy siak, wyróżnienie kodu trzeba testować w środku tekstu -- czy to prawdziwego posta wziętego z forum, czy to lorem ipsum poprzetykanego instrukcjami. Nie ma co wypisywać jednej linijki kodu inline i pod nią umieszczać link, bo to dla kodu inline nienaturalne (tak tylko mówię; wiem, że tutaj specjalnie to tak wstawiłeś dla porównania).
Co do tego Delphi to IMO wygląda to nie za ciekawie. Bez podkreślenia na pewno byłoby czyściej. To miejscami wygląda jak chmury tagów. W takich chmurach podkreślenie zaśmieca widok (dużo dodatkowych, długich linii), ale pomaga rozgraniczyć poszczególne linki (jeden link rozciąga się tam, gdzie jest jedno nieprzerwane podkreślenie). To rozgraniczenie można jednak zapewnić, wstawiając pomiędzy linkami jakiś ogranicznik. Niektórzy wstawiają pałkę |, ja przy dużej liczbie linków preferuję delikatną kropeczkę podobną do gwiazdki *, coś takiego: ·. Można też poradzić sobie bez ogranicznika, samymi marginesami pomiędzy linkami. Zwykle wystarczy, by odstęp pomiędzy linkami był 2-3x większy od szerokości odstępu pomiędzy wyrazami (tzw. spacji :P).
Uważam, że w ogóle zaskakująco trudno osiągnąć ZEN jeśli chodzi o linki bez podkreśleń (a podkreślenia zaśmiecają często widok). Nieźle udaje się to IMO Twitterowi. Tam prawie wszystkie linki są niebieskie (a ten kolor wciąż podpowiada, że to link, a nie co innego), poza paskami nawigacyjnymi i linkami pomocniczymi np. w nickach. Podkreśleń nie stosują w ogóle -- jedynie w :hoverach. No ale Ty niebieskiego przy tej palecie barw strony raczej nie możesz użyć ;).
Zgodnie z sugestiami zmienilem tlo dla instrukcji jezyka: Lorem ipsum lores
Usunalem tez text-decoration z linkow oraz z linkow do podforum.