Mikroblogi - odswiezenie wygladu

Mikroblogi - odswiezenie wygladu
Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
1

Na poczatek prosba o feedback samego wygladu wpisu:

a6354f1930.png

Zmiany to:

  • zmniejszenie obszaru avatara oraz nazwy uzytkownika
  • zdecydowane pomniejszenie obszaru zajmowanego przez komentarze (avatar, login, odstepy)

Teraz pytanie o UX:

  • Byc moze zamienic miejscami elementy go oddawania glosu na wpis z data?
  • Dodawanie komentarza po kliknieciu na ikonke komentarza?
  • Byc moze wyswietlac formularz do komentowania od razu pod danym wpisem?
edytowany 1x, ostatnio: Adam Boduch
madmike
  • Rejestracja:ponad 19 lat
  • Ostatnio:ponad 5 lat
2

Te komentarze są wciąż zbyt dużę - imho tam już jest niepotrzebny avatar użytkownika i nie wiem czy tak potrzebne te ikonki zegara... To powinien (komentarz) być nikłą częścią wpisu na mikroblogu - bardziej w postaci komentarzy na forum czy też ich lekko przerobionej wersji.


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
0

Wersja bez avatarow w komentarzu:

e5cd4d8f23.png

oraz bez ikon w komentarzu:

fa36faadb2.png

oraz bez tych zielonych elementow graficznych:

ac935c578b.png

@madmike: jak zwykle dzieki za opinie :)

edytowany 1x, ostatnio: Adam Boduch
Marooned
Administrator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
  • Lokalizacja:Poznań
0

Co do UX, to nadal w blogach i ich komentarzach brakuje podstawowej zasady: 1x[tab] przechodzi do guzika/linka akceptującego/wysyłającego.

Co do wyglądu, to Adamie - spróbuj może dać godzinę (i lajki?!) obok nicka, a treść od nowej linii?


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
2
Marooned napisał(a):

Co do UX, to nadal w blogach i ich komentarzach brakuje podstawowej zasady: 1x[tab] przechodzi do guzika/linka akceptującego/wysyłającego.

Co do wyglądu, to Adamie - spróbuj może dać godzinę (i lajki?!) obok nicka, a treść od nowej linii?

8822c735ad.png

S7
  • Rejestracja:ponad 11 lat
  • Ostatnio:prawie 10 lat
  • Lokalizacja:Słupsk
  • Postów:39
0

A co jakby zrobić że jest avatar + nick: wiadomość, wszystko w jednej linii, a po najechaniu na komentarz pojawialy by sie ikonki odpowiedzi i kciuka w górę przylegające do prawej dolnej krawędzi tego komentarza, a nad ikonkami małą czcionką kiedy wysłano komentarz.

abrakadaber
abrakadaber
  • Rejestracja:ponad 12 lat
  • Ostatnio:7 miesięcy
  • Postów:6610
2

ta wersja:
user image
z tym że, wydaje mi się, że powinieneś odsunąć jeszcze godzinę od nicku.
Natomiast co do tych zielonych elementów graficznych to są wg mnie po prostu za ciężkie i odstają kolorystycznie od reszty (ikonki ciemne, ramki też)


Chcesz pomocy - pokaż kod - abrakadabra źle działa z techniką.
Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
1

7332c23f48.png

Z tych zielonych elementow graficznych mozna latwo zrezygnowac w razie czego :)

Dodatkowo, sekcja z popularnymi wpisami z ostatniego tygodnia (po prawej stronie):

e1161c95d0.png

Marooned
Administrator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
  • Lokalizacja:Poznań
0

Wielokrotne klikanie w "xx komentarzy" prowadzi do @{4programmers.net}: @{4programmers.net}: @{4programmers.net}: @{4programmers.net}: - to raczej powinno być jednorazowe.


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
1

Odświeżam wątek. Co myślicie o takiej zmianie?

2670830085.png

Zmiany:

  • dodanie ilości wyświetleń
  • zmniejszenie avatara
  • lekkie powiększenie czcionki
  • umieszczenie daty publikacji oraz ilości wyświetleń na górze po prawej stronie
  • ukrycie opcji edycji oraz usunięcia pod menu kontekstowe
  • wyrównanie do prawej opcji dodania komentarza

Specjalnie zamieściłem screen prezentujący wpis do mikroblogu oraz komentarz. Możecie zobaczyć, że w faktycznym wpisie, data jest wyrównana do prawej, natomiast w komentarzu jest wyrównana do lewej. Inna jest też ikonka służąca do pokazania menu kontekstowego z opcjami edycji czy usunięcia. Pytanie: jaka wersja jest lepsza?

Marooned
Znaczy się powiększenie fontu :P
Azarien
ja tu widzę problem roku 2100 ;-D
Marooned
Ja mam ustawiony format ISO 8601 ;)
Marooned
Administrator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
  • Lokalizacja:Poznań
0

Podoba mi się wersja wpisu z rozbiciem pewnych informacji w grupy. Co prawda przy 1920px będzie to rozbicie bardzo silne więc nie wiem czy to będzie dobre, ale wizualnie wygląda klarowniej.


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
0

No właśnie, uważasz, że to rozbicie, tj. wyświetlenie daty napisania po prawej stronie jest OK? Czy tak jak w komentarzach - wyświetlanie po lewej stronie, obok nicku?

Marooned
Administrator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
  • Lokalizacja:Poznań
0

Na screenie przy małej szerokości ekranu jest git. Nie chce mi się ekranu przekręcać do poziomu by zobaczyć jak by to wyglądało przy 1920px - jak masz to możesz screenem zapodać ;-)


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
0

d55ee4c6fc.png

Zauważ, że we wpisie data jest po prawej stronie, natomiast w komentarzu po lewej. Czy tak może być? Trochę niekonsekwentnie...

Marooned
Administrator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
  • Lokalizacja:Poznań
0

Hm, no szkoda tej niekonsekwencji. A może wykorzystać fakt, że avatar jest większy, więc po jego prawej dać 2 rzędy? Górny, bold, nick. Dolny data i liczba wyświetleń?

Przydałby się ktoś ze zmysłem UX/UI ;-)


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
2

@Marooned: zastosowałem się do Twoich wskazówek, aby datę umieścić pod loginem. Oto efekt:

295d7e74dd.png

Mi się podoba :)

Marooned
Administrator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
  • Lokalizacja:Poznań
0

Jest nieźle, ale chyba Odpowiedz przy komentarzu pomiędzy liczbą głosów a lajkami niezbyt tam pasuje. To nie dane statystyczne, ale akcja - powinna być nieco oddzielona.


Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
0

@Marooned: ok, po prawej stronie np.?

Marooned
Administrator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
  • Lokalizacja:Poznań
0

To by dało spójność z wpisem głównym, czyż nie? Tylko by niepotrzebnie nie powiększyło miejsca w pionie.
W ogóle to jestem tu jedynym komentującym a nie uważam się za speca od UI/UX. Co sądzą inni?


flowCRANE
Inni pewnie też nie są specami, więc nie chcą się wypowiadać ;)
abrakadaber
abrakadaber
nie komentuję bo się nie znam - mi wystarczy, że informacje są dostępne a gdzie są to już drugorzędna sprawa (w sensie czy po lewej czy po prawej - po prostu się przyzwyczaję). Ważne, żeby to gdzie dane info jest nie zmieniało się co tydzień.
flowCRANE
Moderator Delphi/Pascal
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 5 godzin
  • Lokalizacja:Tuchów
  • Postów:12164
0

Podzielam zdanie @Marooneda - statystyka od akcji powinna być oddzielona; Jest opcja Dodaj komentarz i opcja Odpowiedz (czym się różnią?), więc powinny być w podobnym miejscu - po prawej na dole wpisu; Jakaś spójność będzie;

Można by też dodać małą grafikę do opcji Odpowiedz - będzie pasowało do opcji dodawania komentarza; To tylko sugestia.


Pracuję nad własną, arcade'ową, docelowo komercyjną grą z gatunku action/adventure w stylu retro (pixel art), programując silnik i powłokę gry od zupełnych podstaw, przy użyciu Free Pascala i SDL3. Więcej informacji znajdziesz na moim mikroblogu.
edytowany 1x, ostatnio: flowCRANE
abrakadaber
abrakadaber
  • Rejestracja:ponad 12 lat
  • Ostatnio:7 miesięcy
  • Postów:6610
2

powiem tak, że wg mnie "opcja" Odpowiedz jest mało widoczna - niejako zlewa się z różnymi statystykami i jeśli się człowiek nie wczyta co tam jest to traktuje ją właśnie jako statystyki. Mi dłuższą chwilę zajęło znalezienie przycisku odpowiedzi do komentarza, i to tylko dlatego bo jej szukałem bo stwierdziłem, że jak w innych komentarzach ludzie piszą do poprzedniego to zapewne jest taka opcja bo się nikomu nie chciało ręcznie nicka wpisywać. Można spróbować dać Odpowiedz też w prawy dolny róg komentarza, np. w ten deseń:
user image


Chcesz pomocy - pokaż kod - abrakadabra źle działa z techniką.
Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
0

@furious programming: opcja Odpowiedz oraz Dodaj komentarz nie różnią się praktycznie niczym. Jedyna różnica jest taka, że w textarea od razu będzie login autora - czy to komentarza, czy wpisu...

Adam Boduch
Administrator
  • Rejestracja:około 23 lata
  • Ostatnio:6 dni
  • Postów:11948
2

@furious programming: Zgodnie z sugestią przesunąłem link Odpowiedz do prawej strony.

Marooned
Zdecydowanie lepiej!
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)