Zaloguj się aby komentować
#uxplakaljakuzywal
Dzisiaj temat z pogranicza UX writingu i UX designu, czyli ikonki i etykiety.
Jako ikonkę mam tu na myśli piktogram reprezentujący jakąś funkcję lub informację, w interfejsach często będący przyciskiem; za etykietę zaś uznaję towarzyszący ikonce tekst, wyjaśniający działanie danego przycisku.
Kierując się chęcią stworzenia minimalistycznego interfejsu, designerzy czasem decydują się umieścić w nim samą ikonkę bez towarzyszącej jej etykiety.
Jest to zrozumiałe, gdy korzystamy z tych piktogramów, które są przez użytkowników trwale kojarzone z jednym konkretnym działaniem (np. lupa, dyskietka, iks).
Gorzej, gdy ikonka może być interpretowana na wiele sposobów. Wówczas użytkownicy nie wiedzą, czego spodziewać się po akcji, którą wywołuje dany przycisk. Zwiększają się ich poziomy stresu i napięcia i mniej chętnie eksplorują daną stronę lub aplikację.
Dobrą praktyką UX jest upewnienie się, że każdej ikonce towarzyszy etykieta, która krótko wyjaśnia, czego możemy się spodziewać po naciśnięciu przycisku lub do jakiej podstrony zostaniemy przekierowani.
Jeśli piktogram jest oczywisty — jak na przykład wspomniana już lupka — to można pominąć etykietę.
Jeżeli natomiast nie mamy miejsca na etykietę i jesteśmy zmuszeni dać samą ikonkę, zadbajmy o to, by:
• piktogram jak najlepiej obrazował działanie przycisku;
• etykieta pojawiała się w formie tooltipa po najechaniu kursorem na ikonkę;
• działanie przycisku zostało wyjaśnione w trakcie onboardingu.
Nie zapominajmy przy tym o dostępności — elementy strony, w tym każdy znajdującyc się na niej przycisk, powinny mieć Alt Text, dzięki któremu osoby korzystające choćby ze screen readerów mogły zapoznać się z działaniem każdego elementu.
#UX #uxwriting #Dostępność #accessibility #webdesign


@Wrzoo To czego ja nienawidzę na stronach internetowych, to wyskakujące okienka z jakże interesującymi mnie informacjami!
Co do A11Y i alt tekstach przypomniałaś mi jak kiedyś dostałem zlecenie na stronę fundacji, czasy pierwszych jQuery i zachłyśnięcia się web 2.0, może to nie było już tak kolorowe jak czasy stron na tabelach I Geocities ale jeszcze nie czasy bootstrapa i każda strona wygląda identycznie.
No ale do rzeczy miałem pociąć stronę z projektu Photoshopa i przygotować mocno pod SEO, pierdyliard tagów, alt tekstów, bo PageRank czuje dobrze człowiek xD
Wszystko by było dobrze, strona wstępne zaakceptowana przez klienta, zostaje tylko usunąć lorem ipsum i uzupełnić treści i brać się za SEO.
Przychodzi kolejny mail od klienta: niestety nie mogę zaakceptować projektu strony, stronę "widziała" nasza pani dyrektor i powiedziała tylko że ta strona to gówno i jeden wielki bełkot i burdel.
Próbuje wytłumaczyć klientowi że treści uzupełniamy to lirum epsum zniknie i niech zaktualizuje przeglądarkę
To był błąd, po prostu strona miała najrbane tagów, zanim dyrektor na czytniku dotarł do tekstu właściwego to czytal teńme tagi do usranego
Zaloguj się aby komentować
#uxplakaljakuzywal
Kiedy produkt się rozrasta...
Interfejs Steama rozrastał się latami. I wiele lat jego elementy wyglądały tak, jak na załączonym obrazku: bez spójności wizualnej, z niezwykle skomplikowaną architekturą informacji, trudną w obsłudze dla nowicjuszy lub osób korzystających z niej rekreacyjnie.
Wydaje się, że na klątwę "spuchnięcia" i cierpiący na tym interfejs użytkownika cierpi wiele firm. Mają z tym problemy chociażby Amazon, WP i Reddit (do którego redesignu dalej się nie przyzwyczaiłam).
Steam w ostatnich latach zaczął nadrabiać zaległości. Wchodząc ostatnio na tę platformę, widzę znacznie mniej nieścisłości wizualnych, choć dalej zdecydowanie za długo szukam miejsca, gdzie mogę aktywować podarowany mi kod na grę.
Nie mamy stuprocentowej kontroli nad tym, czy produkt się rozrośnie, ani tym bardziej w którym kierunku. Ciężko jest się również na taki scenariusz przygotować (choć kusi zostawienie na zapas whitespace'u i potykacza "Under construction" w miejscach na planowane ficzery).
Nie powinno się natomiast dawać produktowi niekontrolowanie puchnąć, bo w końcu wszystko dąży do entropii. Nim się obejrzymy, w naszym mieszkaniu podłogę przykryje kurz, góry prania zaczną piętrzyć się na fotelu, a zlew zacznie żyć własnym życiem - i tak jest też z interfejsami.
I choć mało kto lubi robić gruntowne porządki, to raz na jakiś czas należy posprzątać nie tylko swoją szafę i folder "Pobrane", ale też interfejs aplikacji. Im dłużej z tym zwlekamy, tym trudniejsze zadanie czeka nas w przyszłości.
A skoro Steamowi się udało zabrać za porządki, to czemu nie Tobie? Posprzątaj dzisiaj chociażby folder "Pobrane" na komputerze.
#ux #design #webdesign #steam #valve


Zaloguj się aby komentować
Nie no trochę przegięli.
Zwracam uwagę na brak X przy newsletterze.
Na szczęście działa kliknięcie poza panelem.
#usability #ux #internet #webdesign #bekazpodludzi


Zaloguj się aby komentować
Temat wielokrotnie powtarzany, ale dziś się z nim zetknąłem i tego, kto projektował położenie przycisków należy powiesić. Z pewnością po wpisaniu danych najczęściej chcemy je wyczyścić.
#informatyka #webdesign #nieheheszki

Zaloguj się aby komentować
Pamięta to ktoś jeszcze?
Stronka tak idiotyczna, że ludzie nie mogli przestać jej udostępniać - na dole miała prosty licznik odwiedzin, chyba do miliona, który kilka razy się resetował bo doszedł do limitu.
Była tak popularna, że przez wiele lat pozycjonowała się #1 w Google pod hasłem "węgiel drzewny".
Żeby obejrzeć trzeba jakiś erzatz Flasha mieć, np.
https://addons.mozilla.org/en-US/firefox/addon/flash-player-emulator/
#heheszki #webdesign #glupoty #internet


Zaloguj się aby komentować
Pamięta ktoś adres tej stronki na której koleś zrobił parodię współczesnych stron www?
Mam na myśli wkurwianie userów tymi wszystkimi:
Zapisz się do newslettera!
Porozmawiaj z konsultantem!
Czy pozwalasz stronie wysyłać ci powiadomienia?
Akceptuj pliki kuki!
Poświęcisz krótką chwilę na wypełnienie ankiety?
Zobacz najnowsze promocje c⁎⁎ju!
Może jednak zapiszesz się do newslettera.
Załóż konto.
#frontend #webdesign #usability #wkurw


Do tego wszystkie elementy strony bez żadnego kontrastu, oddzielenia wizualnego, zlewające się ze sobą.
Zwariowane fonty bez polskich znaków, żeby polskie litery jak najmocniej się wyróżniały.
Po wejściu na stronę wszystko schowane pod "hamburger menu", przez co jest on jedynym domyślnie widocznym elementem strony internetowej.
Gówniany krój czcionki, który jest kompletnie nieczytelny.
Aaaaa! I jeszcze te strony typu one page meaningless bullshit - jedna strona na której nie ma ani adresu firmy ani konkretów czym się zajmuje tylko jakieś pierdoły, że liczy się dla nich klient, spełniają jego najskrytsze oczekiwania i dbają o środowisko.
No i strony gdzie w nagłówku jest jebitne zdjęcie na cały ekran, które trzeba za każdym razem całe przewinąć, żeby dostać się do treści.
Albo strony ilustrowane obrazkami z d⁎⁎y, kompletnie nie związanymi z treścią artykułu, a wstawionymi tylko dla atencji, bo debile jak widzą obrazek to częściej klikają.
No i strony seo z treścią wygenerowaną przez boty i translatory - za takie coś bym wieszał za jaja.
Zaloguj się aby komentować
Dobra mordko daj porade bo zawsze mi dobrze poradzisz,
Muszę postawić prostą stronę, menu gorne, 4 zakladki, 4 podstrony, jakis kontakt logo na gorze i chce tam wyswietlac zdjecia przedmiotow do sprzedania, żaden sklep tylko prezentowanie zdjęć i namiary na kontakt telefoniczny.
Co robisz w mojej sytuacji ? Chciałbym żeby to wyglądało jakoś przyzwoicie
Mam juz domene zaklepana, mam jakis hosting na hosting house ale ten quick cms to sobie mogę wsadzić
Jakis generator konkretny polecicie ?
#hosting #webdev #webdesign
Obecnie bardzo tani i dobry jest hosting hostido https://wersito.pl/recenzja-hostido/ tutaj możesz o nim poczytać. I tak jak zdążyłeś zauważyć wordpress jest tylko warty uwagi..
Zaloguj się aby komentować
Z kategorii ciekawostek: Zapraszam Cię do wehikułu czasu - jedziemy do lat 90. Takiego CSSika na pewno dawno nie widziałeś.
Swoją drogą, jeżeli macie jeszcze jakieś przykłady stron w takim stylu, śmiało wrzucajcie, z chęcią bym obejrzał
http://www.abc-med.info/index.htm
#webdesign #webdev #grafika #internet #ciekawostki
@dundersztyc niby spoko ale dobrze że to minęło - strasznie oczojebne, nieco niespójne, za mało minimalizmu i jednolitości, tylko jakieś takie pstrokate...w takim MediCover wygląda to dużo lepiej, uporządkowane, łatwe w nawigacji https://www.medicover.pl/
Zaloguj się aby komentować
UI design kilku witryn internetowych by #midjourney
#aiart /tag/midjourney#grafika #webdesign





Zaloguj się aby komentować
Wiecie, że można już odmówić dostępu do swojej strony botowi od Chata gpt?
Jeżeli nie chcesz żeby Twoje treści służyły do szkolenia następnych wersji gpt można poprosić robota o wyjście.
Co ciekawe można im odmówić dostępu do nowych danych na stronie, ale nie można odmówić dostępu do tych które sobie wcześniej pobrali.
Przykładowy kod robots.txt
User-agent: GPTBot
Allow: /directory-1/
Disallow: /directory-2/
Robot przedstawia się jako
User agent token: GPTBot
Full user-agent string: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.0; +https://openai.com/gptbot) )
Dokumentacja:
https://platform.openai.com/docs/gptbot
#webdev #webdesign #hosting #chatgpt

Zaloguj się aby komentować
Zaloguj się aby komentować
Daaawno mnie nic tak nie ucieszyło. W końcu jakaś sensowna kontrola nad dzieleniem wyrazów - text-wrap:balance
Tak wiem, Canary, ale c⁎⁎j.
#webdev #webdesign

Zaloguj się aby komentować
Hej, tym razem przychodzę z projektem aplikacji mobilnej
https://www.behance.net/gallery/164726627/Voyager-Traveling-App-Concept
STANDARDOWO LINK DO CAŁOŚCI
Dajcie znać co myślicie!
#ui #grafika #webdesign #aplikacja

Jako ktoś zajmujący się projektowaniem to problem z tymi conceptami apek to, że nigdy to nie będzie wyglądało jak autor zamierzył. Np. miasta zawsze będą zdjęciami, które firma będzie chciała wymieniać.
Ale jak już to tytuły miast i ofert po lewej. Cena powinna być jakoś wyróżniona jako osobny label najlepiej obok przycisku rezerwuj. serduszko powinno być do dodania do ulubionych. No i logo firmy powinno zawsze być widoczne na górze.
Zaloguj się aby komentować
@tomasz-frankowski XD widzę że masz jeszcze spore problemy z łapaniem co napisałem, tak wiem że port jest wyparty ale to nie zmiania że całe komunikacja na innych jest oparta o ten właśnie konkretny wraz protokołem http, to że teraz dają HTTPS nie oznacza że coś się w tej materii zmienilo jeśli chodzi budowę internetu to dodanie tylko kolejnej warstwy bezpieczeństwa żeby to co działało na 80tce dalej działało,
Bądźmy poważni i nie róbmy osobistych wywodów "doucz się"
Zaloguj się aby komentować
Hej, przychodzę z projektem strony (Daily UI 003/100)
https://www.behance.net/gallery/163884865/Landing-Page-%28Video-Editing%29
LINK DO CAŁOŚCI
Myślę, że zrobiłem duży progres
#ui #grafika #webdesign

Zaloguj się aby komentować
Hej, zacząłem dzisiaj Daily UI Challenge
Tak prezentuje się wykonany przeze mnie projeky Sign up page (Strony do rejstracji??)
STANDARDOWO LINK DO CAŁOŚĆI
https://www.behance.net/gallery/163573985/Sign-up-Page-%28Meditation%29
#grafika #webdesign #ui

Zaloguj się aby komentować
Zaloguj się aby komentować
Hej, przychodzę z kolejnym projektem! Uznałem, że będę teraz codziennie coś tworzył i dzielił się tym z wami
Tym razem padło na projekt graficzny strony internetowej!
Kawiarnia dla, której to zrobiłem nie istnieje, losowe logo ze stocka
CAŁOŚĆ POD TYM LINKIEM
https://www.behance.net/gallery/163502939/Coffee-Monster-Website
Chętnie poczytam wasze opinie!
#grafika #grafikakomputerowa #webdesign

@matihautamaki dalej się nie rozumiemy, więc zapytam inaczej - jeżeli szukasz jakiejś informacji w google to oczekujesz, że dostaniesz stronę z właściwą odpowiedzią (czytaj: wartość biznesową), czy wrzucą się na stronę główną kawiarni i masz sobie szukać po podstronach?
Mam wrażenie, że coś w stylu https://www.dailyui.co byłoby dla ciebie lepsze w nauce o co rzeczywiście chodzi w projektowaniu i przy okazji - budowaniu portfolio.
edit: ekipa od tailwinda ma też świetny ebook o projektowaniu https://www.refactoringui.com ale to dopiero jak zrobisz kilka daily ui
Zaloguj się aby komentować
Webmasterowe Tosie i Tomki, potrzebuję Waszej pomocy.
Co jakiś czas robię sobie zrzut całej strony internetowej do PDFa (czy to drukuj do PDF czy przez funkcję Opery "zapisz jako PDF"). Zawsze działało jednak natrafiłem na problem z zapisem gdy strona korzysta z jakiegoś diva (czy co tam obecnie jest używane, nie bijcie :D) przy użyciu "Overflow:scroll". Zapisuje mi stronę ale tylko z widoczny fragmentem tego diva a zamiast całości.
Jest jakiś sposób na to by zapisać całość do PDF? Robienie screenów i przewijanie jest dość mozolne gdy treści sporo
#webdev #webdesign #kiciochpyta
@Whoresbane tu masz wyjaśnienie do czego służy ten atrybut: https://www.w3schools.com/css/css_overflow.asp
Jeśli nie zależy ci zbytnio na layoucie strony w tym PDF to po prostu wyciągnąłbym interesująca cię treść i ją zapisał. Ewentualnie spróbuj w tym atrybucie, w źródle strony zmienić „scroll” na „visible”. Nie będzie za pięknie ale cała treść powinna być dostępna dla konwertera. Chyba, że jest tu ktoś mądrzejszy ode mnie i zna lepszy sposób.
Zaloguj się aby komentować