Ny webbplatsdesign

[jonas]

Nu finns http://test.aktivdemokrati.se/ för att bygga upp nytt utseende och nya funktioner.

Kontakta mig för login via webb, ssh, sftp och mysql.

[jonas]

Buddypress är installerad på http://test.aktivdemokrati.se/

Du kan bli medlem, lägga till vänner, gå med i grupper, osv.

Och temat är "responsive" för att hantera skärmar i olika storlekar.

Så gå gärna in där för att vara del av vårt bollplank för nästa generation av aktivdemokrati.se

[jonas]

Jag tänker att vi kan ta efter det gränssnitt som används allt mer i Android, Google och Facebook och twitter.

kugghjul = konfiguration
tre vågräta linjer = meny
hus = tillbaka till hemsidan
stjärna = favoritmarkera
... = fler alternativ i den lokala kontexten
kryss = ta bort från aktuell lista
penna = redigera/ändra elementet
pratbubbla = kommentarer och chatt
förstoringsglas = sök


Defaultutseendet på Buddypress är ganska utspritt.
Se exempelvis http://test.aktivdemokrati.se/groups/webbgruppen/
(Förutsatt att du är inloggad OCH medlem i gruppen.)

* Borde ha tydlig separation mellan inläggen.

* "Comment" borde inte vara en knapp, eftersom det inte är en "slutförande" av action utan snarare en länk för att öppna kommentarsfältet för att påbörja skrivandet. Se G+ och FB för exempel.

* "Favorite" borde vara en stjärna istället. Och på mobil borde den läggas under "..." för att spara utrymme.

* "Delete" borde vara kryss istället. Och på mobil borde den läggas under "..." för att spara utrymme.

* "Show Everytning" ska nog väsnterställas och komprimeras. Se exempelvis https://plus.google.com/s/trees

* Länkarna "Home, members, send invites, admin" bör ligga i box i högerkanten, eller under "..." för att spara plats, i jämnhöjd med gruppens titel.

Headerblocket för gruppen skulle kunna läggas som på G+, ifall det finns plats, annars komprimeras. Se G+appen.


Sen så skulle vi behöva gruppera grupper. Exempelvis ska lokalgrupper grupperas tillsammans.

[peteri]

En sak som skulle underlätta vid val av tema och formgivning är en funk-spec, dvs funktionspecifikation.

Vilka funktioner, samt vilken information, länkar, bilder, etc behövs till den nya sajten?

En lista vore bra. Gärna hierarkiskt.

[jonas]

Jag börjar på en specifikation här:
https://docs.google.com/document/d/1SCUK6mbRNEzdB0ix85-Z8nXze2FPJQEklanb_TwqCUs/edit?usp=sharing

Skicka din gmail till mig så ger jag dig skrivrättighet.
Men alla kan kommentera dokumentet.

[peteri]

Jobbat vidare på formgivningen.



http://somethingelse.se/filer/ad-index-004.png




http://somethingelse.se/filer/ad-index-004b.png

Återkoppling välkomnas.

//Peter

[peteri]

Hej alla.

I samband med att webbplatsen ska anpassas till mobiler och pekplattor uppdateras formgivningen också. Jag är grafisk formgivare och har tagit på mig ansvaret att utforma en ny sida.

I nuläget har jag tagit fram följande. Exempel på förstasidor. Klicka på länkarna under bilderna för att se de större versionerna. Klicka sedan på bilden ni kommer till för att zooma in och se bilden i 100%.




http://somethingelse.se/filer/ad-index-004.png




http://somethingelse.se/filer/ad-index-004b.png

Återkoppling välkomnas.

Diskussion om alla funktioner på den nya webbplatsen finns här:
http://aktivdemokrati.se/forum/viewtopic.php?f=82&t=2042

//Peter

[Alexander Jakobsberg]

Supersnyggt !

Bra jobbat

Kanske ska du passa på att fräsha upp loggan också? T.ex. ta bort "blänket" i den.

[robwe]

Riktigt snyggt! Bra jobbat!

[peteri]

Supersnyggt !

Bra jobbat

Kanske ska du passa på att fräsha upp loggan också? T.ex. ta bort "blänket" i den.

Tack för återkopplingen, Alexander.

Jag har läst en del av diskussionerna kring loggan och förstår att det har lagts mycken tid och möda på loggan.

Det finns ett par enkla justeringar man kan göra för att få en effektivare logga och dessutom en vektoriserad sådan. De två sakerna är

1. Ta bort brusfiltret.
2. Ta bort blänket, som du säger.

Gör man ovanstående blir loggan lätt att vektorisera och distribuera.

Riktigt snyggt! Bra jobbat!

Tack robwe. Kul att du uppskattar skisserna.

[jonas]

Jag associerar stjärnorna vid "Dagens röst" till USA-politik. Att det är rött, vitt och stjärnor av den sorten.

[peteri]

Uppdatering av första sidan:

http://somethingelse.se/filer/ad-index-03.html

Ändringar:

1. Tog bort medlemslänken på anmodan.
2. Tog bort röstboxen och bloggboxen.
3. Rensade bort lite exempellänkar i sidfoten.
4. Tog bort stjärnorna vid "Dagens Röst".

Funderar även på ett budskap (fras) som tydligt sammanfattar vad AD är för nya besökare.

Jag läser just nu för 3:e gången en bok om usability på nätet, dvs hur man förenklar och förtydligar en webbplats, så att syftet blir tydligt och interaktionen blir lättare.

Tre frågor som författaren Steve Krug menar alla människor ställer sig själva omedvetet när de kommer till en ny webbplats är:

1. Vad gör dom här? (Vad handlar sajten om?)
2. Vet dom vad dom gör? (Ser webbplatsen professionell och seriös ut?)
3. Vad ska jag göra nu?(Var ska jag klicka nu?)

Om svaren på fråga 1 och 3 är tydliga och lätta att uppfatta som användare, plus att svaret på fråga 2 är ett enkelt ja, har man tagit ett stort steg i designprocessen; man har kommit en god bit på vägen till en användarvänlig webbplats.

Andra exempel på detaljer värda att fundera på är:

- Användare läser inte text, de skummar till dess de hittar något som intresserar dom. Vi vet att vi inte behöver läsa all text på en sida för att hitta det vi söker för tillfället.

- Länkformuleringar bör vara tydliga och helst inte gå att missuppfatta.

- De flesta som surfar på nätet använder en teknik som kallas "muddle", dvs de klickar på saker utan att riktigt förstå hur dom fungerar. En analogi är att det är få människor som läser manualer grundligt innan de börjar använda en apparat de precis köpt.

- Vi tar inte optimala beslut på nätet, vi "satisfice". Alltså en blandning mellan "Satisfying" och "Sufficing". Som exempel nämns att till exempel brandmän överväger inte alla tillgängliga alternativ, utan de använder den första rimliga planen de kommer på. För en webbplats innebär det att en besökare inte läser genom hela sidan, som en formgivare gärna vill, utan man skummar snabbt igenom och klickar på det första intressanta/rimliga alternativet.

- Tumregeln för formgivning på nätet är: Don't make me think (titeln på boken Steve Krug författat). Ju färre mentala processer som behövs för att använda webbplatsen desto bättre.

[peteri]

Uppdatering av första sidan:

http://somethingelse.se/filer/ad-index-03.html

Ändringar:

1. Tog bort medlemslänken på anmodan.
2. Tog bort röstboxen och bloggboxen.
3. Rensade bort lite exempellänkar i sidfoten.
4. Tog bort stjärnorna vid "Dagens Röst".

[peteri]

SIDFOTEN & MENYSORTERING



Se hela sidfoten här: http://somethingelse.se/filer/ad-sidfot.png

För lättare tillgång till de olika delarna på sajten kan man ha en bantad platskarta i sidfoten. Som ni ser är den en nivå djup. Huvudmeny -> Nivå 1

Man kanske också kan se över gruppering, länknamngivning och sortering i de olika nivåerna.

DRAGSPELSMENY

För att banta ner de lokala menyerna (inte med på bilden) skulle man kunna ha "dragspelsmenyer", dvs man visar till exempel Nivå 1 och en pil indikerar att det finns fler länkar under. När man klickar på länken fälls menyn ut och de underliggande nivåerna Nivå 2, Nivå 3 osv, blir synliga.

Tanken med dragspelsmeny är att man kan ha många länkar i en meny, utan att menyerna för den sakens skull ser onödigt stora och svårtillgängliga ut. Många av undernivålänkarna är även länkar som man besöker mindre frekvent. Då kan det vara en bra kompromiss med att ha dom gömda, tills man klickar på dom.

Man skulle även kunna använda dragspelsmeny i sidfoten.

[jonas]

Jag har förenat trådarna "Ny webbplatsdesign" och "test.aktivdemokrati.se" för att det är samma projekt.

[peteri]

INFOGRAFIK

Ett exempel på hur infografik skulle kunna se ut. Tanken är att göra grafik i vektorformat, så att man kan printa ut bilder vid behov.



Hela bilden: http://somethingelse.se/filer/grafik-001.png

[jonas]

Bra!

Obs! Du behöver inte vara medlem i partiet för att använda valsystemet.

Alla som har rösträtt i en viss kommun för rösta i frågor genom valsystemet genom Aktiv Demokrati i den kommunen. Motsvarande för riksdagen.

Det behövs inte medlemskap i partiet och det kommer inte att kosta något.

Du behöver registrera dig i valsystemet. Använd inte ordet "medlem" eftersom vi inte vill blanda samman registrerad med partimedlem.

[jonas]

I exemplet i infografiken så blir det 56% ja och 44% nej.

Och en sak till: jag skulle vilja byta plats på delegaterna så att personen med klänning röstar ja, för att undvika omedveten köns-profilering.

[peteri]

"Röstberättigade" eller "Folket" eller någon annan term?

[peteri]

I exemplet i infografiken så blir det 56% ja och 44% nej.

Och en sak till: jag skulle vilja byta plats på delegaterna så att personen med klänning röstar ja, för att undvika omedveten köns-profilering.

Misstänkte att något sådant skulle dyka upp när jag valde att ha både män och kvinnor. Kanske lättare att använda bara symbolen för man, som de flesta skulle tolka som människa?

För om mannen röstar nej och kvinnan röstar ja, då är det väl risk för att det blir omedveten könsprofilering åt andra hållet?