Problem i dag Universal och global navigation

En presentation över ämnet: "Problem i dag Universal och global navigation"— Presentationens avskrift:

1

2 Problem i dag Universal och global navigation
Svårt att från startsidan få en överblick över kth.se’s omfång Finns inte länkar överallt till universal home (kth.se startsida) Navigation för kth.se, och subsiter som skolwebb, intranätet ej konsekvent (vill att det hänger ihop som en helhet men också kunna skilja subsiter från huvudsite) Logga, hem-länkar uppe till höger Horisontell meny Megameny Landasidor Navigationselement utspridda vilket leder till att det blir svårnavigerat (vill att relaterade navigationselement är grupperade tillsammans) Horisontellmeny, hem-länkar uppe till höger Mega menyn och Personliga menyn Menyer i dag, ej optimala för effektiv navigering Olika navigering och utseende megamenyn kth.se och personliga menyn Lokal navigering Två olika typer av vänstermenyer Mobil Navigering fungerar inte optimalt Känner inte igen sig mellan mobil och desktop

3 Universal och global navigation

4 Principer Behöver universal navigation, Universal home på alla siter
Räcker inte med länk på logga Genomgående konsekvent ”look and feel” men samtidigt kunna skilja på huvudsite från subsite. Loggor och hem-länkar placeras tillsammans till vänster

5 1. Svårt att från startsidan få en överblick över kth.se omfång
Ingång för student Bara här når man: Ingång för anställd Alumner Svårt att få koll på omfång genom att se kategorier. Egna subsiter dyker upp för innehåll långt ner i strukturen. Finns länkar under ”Ingångar” som inte finns under kategorier

6 1. Svårt att från startsidan få en överblick över kth.se omfång
Det växer … Kth.se->alumni->engagera dig

7 2. Finns inte länkar överallt till universal home (kth.se startsida)
Här kommer du till kth.se Här Kommer till kth.se Här kommer du inte till kth.se Här kommer du till kth.se Och det räcker inte med länkad logga för att länka till Universal home

8 Här finns start för skolwebb
3. Navigation för kth.se, och subsiter som skolwebb, intranätet ej konsekvent Här finns start för skolwebb Här finns start för Intranät Här finns inte start för Intranät

9 Olika templates landasida Megameny
Tillägg start subsite Kth.se Kth.se Sub-site te KTH Startsida Subsite Startsida Olika templates landasida Megameny Djuplänkar Samma template för megameny Kth.se Känna igen struktur från Mega-meny Samma template landasida/ startsida kategori Djuplänkar Kth.se Samma template lokal navigering, nivå 2

10 3. Navigation för kth.se, och subsiter som skolwebb, intranätet ej konsekvent
KTH INTRANÄT Sök KTH I INTRANÄT I ANSTÄLLNING OCH ARBETSMILJÖ STÖD OCH SERVICE FORSKA OCH UTBILDA ORGANISATION OCH STYRNING FÖRSLAG: Ha ett utseende för startsida/ landasida kth.se Ha konsekvent samma template för alla startsiora/ landasidor på subsiter så känner igen att man nått en subsite

11 3. Navigation för kth.se, och subsiter som skolwebb, intranätet ej konsekvent
FÖRSLAG: Ha ett utseende för startsida/ landasida för kategori (nivå ett lokal navigering)

12 3. Navigation för kth.se, och subsiter som skolwebb, intranätet ej konsekvent
FÖRSLAG: Ha ett utseende för nivå två lokal navigering

13 Här finns startsida för Intranät
4. Navigationselement utspridda vilket leder till att det blir svårnavigerat Här finns startsida för Intranät Här finns startsida för kth.se Här är övriga kategorier

14 Beskriver vilken site du är på
FÖRSLAG 4. Navigationselement utspridda vilket leder till att det blir svårnavigerat Beskriver vilken site du är på KUNGLIGA TEKNISKA HÖGSKOLAN Sök KTH I KTH UTBILDNING FORSKNING SAMVERKAN ORGANISATION OM KTH STUDENT PÅ KTH Universal home (logga och KTH) genomgående på alla siter Navigationselementen samlas från vänster till höger

15 FÖRSLAG 4. Navigationselement utspridda vilket leder till att det blir svårnavigerat
SKOLAN FÖR KEMIVETENSKAP Sök KTH I CHE I FORSKNING UTBILDNING INSTITUTIONER OM SKOLAN KONTAKT Start för subsite

16 Megamenyn och personliga menyn

17 Problem i dag Megamenyn
Mega-menyn är olika på olika platser (ibland motsvarar inte underrubriker i mega-menyn sido-strukturen, ibland gör den det (nästan). I bland listar man alla sidor under en rubrik, ibland inte). Och ordningen är olika. Detta skapar förvirring Mega-meny flimrar. Riktlinjer är att en mega-meny ska visas-döljas efter 0,5 s för att undvika detta. Detta är irreterande. Den dyker också upp ibland när man inte vill det. Menyn ej tydligt avgränsad mot bakgrunden. Samma färg och ej tydlig ram. Vilket gör att man inte alltid vet om man är i mega-menyn eller på sidan. Rubrikerna i Mega-menyn är inte länkar så vissa upprepar rubriken (ibland med annat namn) under rubriken vilket blir förvirrande. Utseende (pilar, linjer som delar upp utan mening, färger) gör det svårt att läsa Undergruppering stöds inte utan att måste göra med nya rubriker, vilket leder till sämre struktur. Tillgänglighet? Responsiv?

18 Principer Ge en förståelse för vad den horisontella rubrik-meny-ingången betyder genom att Visa upp innehåll strukturerat på samma sätt som man sedan känner igen när man klickar sig ner till startsidan Kanske inte allt innehåll men en länk till landasidan som visar allt Ge länkar till de mest besökta sidorna och visa att det finns mer)? Se förslag s. 3 och 4

19 Förslag En template för megameny
Strukturera innehåll i lokal navigering med viktigaste ingångarna överst gör att man kan använda sig av de 5 översta av dessa tex i Megamenyn och sen hänvisa till sida där hittar allt Smooth upplevelse Riktlinjer är att en mega-meny ska visas-döljas efter 0,5 s för att undvika detta. Utseende tydligt avgränsad mot bakgrunden. Så att man tydligt vet om man är i mega-menyn eller på sidan. Ta bort pilar, avskilj med tunna linjer och tillräckligt med luft så blir enkelt att klicka. Utvärdera! Se förslag Undergruppering stöds inte utan att måste göra med nya rubriker, vilket leder till sämre struktur. Tillgänglighet? Responsiv?

20 Megamenyn Administration IT & telefoni Lokaler Genvägar Blankettarkiv
STÖD OCH SERVICE Administration Blankettarkiv Kalender Dokumenthantering Egenrapportering/ HR plus Ekonomi/ Agresso EFH/ e-Fakturahantering Kommunikation och grafisk profil Inköp och upphandling Rekrytering Kemikaliehantering Stipendiehantering …se Administration IT & telefoni Driftstörning KTH Konto Nätverk & säkerhet Arbeta hemma Audio Visuell teknik Telefoni E-post Utskrifter Programvara Köp/ beställning- Tjänstekatalogen Lagring Kontakta support Lokaler Felanmälan Vid krissituation Lokalbokning Lokalservice Utveckling, utbyggnad Parkering Besök på KTH Kartor & adresser Dome of Vision Genvägar

21 Förslag Megameny/ Personliga menyn
Menyer i dag, ej optimala för effektiv navigering Ta fram layout för meny med länkar som underlättar läsbarhet och klickbarhet Testa Olika navigering och utseende megamenyn kth.se och personliga menyn Ska den ena vara klickbar och den andra hover-aktiverad. Hur motiverar vi? Se över så man känner igen kth style i båda menyerna, samtidigt som man ser en skillnad mellan dem så man vet var man är. Tex samma slags block med länkar, Grundplatta samma Men olika templates (innehållande olika block) PM har det gråa temat medans kth,se det blå

22 Personliga menyn Mina kurser Algebra och geometri Algebra och geometri
Kommande Aktuella Oavslutade Avslutade Algebra och geometri HT 2017 Datateknik Algebra och geometri HT 2017 Datateknik

23 LOKAL NAVIGERING

24 Problem Vänstermeny Två olika navigeringsätt
Kth.se Social Utred vad gäller/ hur fungerar Utbytande meny, när behövs? Inkonsekvens, kan minimera?

25 Val av lokal navigering för stora (djupa) webbplatser:
Trädstruktur Rekommenderas ej om har mer än 4 nivåer eller om webbplatsen har olika djup Kan bli överväldigande för djupa webbplatser Mini-navigation Kan fungera om länkar finns under en övergripande text För siter med varierande djup där mini-IA används för de med mer djup Utbytande meny (roll-up) Fördel: Fokuserar på subkategorier

26 Trädstruktur - expanderande menyer utan huvudsida
Fördelar: Man får direkt access till undersidor utan att behöva klicka på huvudsidan Många gånger vill användaren bara gruppera sidor och har inget övergripande att tillföra. Sidan blir då tom eller innehåller bla-bla-text eller upprepar länkar som finns i vänstermenyn Användartester har visat att användaren antingen kan missa huvudsidan eller undersidor (Användartest KTH Social) Kan visa första undersidan, men behålla fokus på menyn Viktigt att fälla ut meny så att det blir synligt Fäll ut menyn under där användaren klickat Nackdelar: Ingen huvudsida för att ge kontext för undersidorna. Vilket leder till att det blir extra viktigt med namngivning av bra sidan. Användaren kan bli disorienterad då man inte får en ny sida utan bara menyn ändras för att visa undersidor Meny som är felaktigt intenderad kan göra att man inte ser relationenr mellan subsidor och hindra användaren att hitta informtion Menyrubriker som är långa tar upp fler rader. Behöver göra det för att om inte gör det så tar det plats från innehåll

27 Förslag Behåll utbytande meny för kth.se
men gör tydligare vad som är sidan du valde i förra läget och som nu är huvudkategori: Undvik versaler på sub-sida då svårare att känna igen ordbilden från förra sidan Mer luft Gör tydligare vad som är huvudkategorin du valde genom att göra undersidor intenderade Utred om går att kombinera utbytande meny och utfällbar för kth.se Robert, var skulle det passa och hur skulle det se ut? Behåll utfällande meny i KTH Social men minimera inkonsekvens med kth.se: Flytta pil vänster Ta bort sida för huvudsida, klick på titel och/ eller pil fäller ut undersidor Visa första undersidan men behåll fokus på menyn När finns innehåll på Översida gör en sida som läggs som första undersida och får heta start eller om

28 FÖRSLAG Två olika typer av vänstermenyer
Utbytande meny Datateknik Kista Jobb & karriär

29 FÖRSLAG Två olika typer av vänstermenyer
Utfällande

30 FÖRSLAG Två olika typer av vänstermenyer
Utfällande Färger Översikt Färger

31 Övriga problem Ibland presenteras länkar på en sida som borde funnits i vänstermeny Ibland är vänstermenyn något som skulle kunna vara länkar på en sida Behov av: Riktlinjer för hur strukturerar innehåll

32 MOBIL

33 Problem i dag Navigering fungerar inte optimalt
Känner inte igen sig mellan mobil och desktop

34 Vill uppnå Konsekvent presentation av olika menyer på mobil
Veta vilken meny som är vilken Känna igen sig mellan desktop och mobil Men viktigast: effektiv navigation så utgå från vad som fungerar på mobil för de oliak menyerna

35 Förslag Personliga menyn
Upplevas som en meny och inte som en sida Känner igen sig hur fungerar på större skärm (Samma navigationsprincip som på desktop)

36 Förslag Horisontella menyn
Samma meny och ikon som PM Men: Samma sidnavigationsprincip (huvudsida till undersida och hur man kommer tillbaka) som på desktop Namngiven kth i stället för med namn Klick på kategori går till startsida/ landasida för kategori som är uppbyggd pss som Megamenyn Vit (och eventuellt blå; se stämmer överens med Megameny)

37 Förslag Meny Programwebb, gruppwebb
Samma meny och ikon som PM Men: Namngiven med namn på Program-, Gruppwebb Samma navigationsprincip som på desktop

38 3. Navigation för kth.se, och subsiter som skolwebb, intranätet ej konsekvent
Mer exempel

39

40

41

42

43

44

45

46

47

48

49

50 LÄNKLISTOR – OKLART OM UPPMUNTRA ANVÄNDNING AV

51 Ingång för student Bara här man når?: Ingång för anställd Alumner Ingång för anställd

52 Länklistor Erbjud som element? Som vänstermeny Del av megameny
Valfri placering på sida Ingen rubrik? Blåa länkar

53 INGÅNGAR FÖR