Användarvänlighet och tillgänglighet Workshop II Överordnad struktur - Analys av eget gränssnitt Applikationen innehåller flera vyer, varav navigeringsvyn är den enda jag hunnit skapa ännu. Applikationen innehåller en topp-list som är gemensam för alla vyer och som jag är nästan klar med vad gäller utseende. Utplacering av bilder sker enligt en stilmallar som anger position och storlek för de olika bilderna. Test-stilmallar som ingår är balanserade, symmetriska, reguljära osv. men det är som sagt användaren som sedan bestämmer. Förstoringar av dessa bilder är inte möjliga att ställa in för användaren. Dessa förstoringar är helt symmetriska, balanserade osv. i alla avseenden, förutom funktionsikoner som visas i vissa fall. Förutsägbarheten är dock iakttagen. Topp-listen består av ikoner som leder till menyer och andra vyer, och en navigerings-lista med sidrubriker och indikationsikoner. Utrymmet här är begränsat och det finns inte utrymme för symmetri, men ikoner finns iallafall både till höger och vänster med navigerings-listan i mitten. Vad gäller förutsägbarhet har jag försökt att placera ikonerna så förutsägbart som möjligt, men är inte 100% säker på att jag lyckats. Det beror också lite på om fler ikoner ska få plats och vad deras funktion ska vara. Det finns förmodligen mer att tänka på för de vyer jag inte skapat ännu, speciellt vad gäller förutsägbarhet och enkelhet. Detaljer - Analys av funktionella detaljer i eget gränssnitt. Val av gränssnittskomponenter: Återigen, med fokus på det jag redan skapat, så hade jag en fundering på om navigerings-listan i topp-listen, som jag tycker har ett ok visuellt utseende bör vara möjlig att klicka på eller inte. De är inte formade som knappar, och den feedback jag fick var att trots detta skulle deltagarna i gruppen ändå försöka navigera med hjälp av sidrubrikerna i navigerinslistan. Jag tolkade det som att särskilt knapputseende i just detta fall inte var nödvändigt, men att funktionen bör finnas med (initialt tänkte jag att swipe-rörelser var nog för att hantera navigering). Gruppering av funktioner: I den lilla del som är implementerad så är ikoner grupperade i topp-listen. I vyer jag kommer skapa kommer utrymmet vara begränsat, men i den mån det är möjligt kommer jag förutom grafisk positionering ta hänsyn till gruppering av funktioner, vilket är viktigt för förutsägbarheten. Detaljer - analys av etiska detaljer i eget gränssnitt. Val av färger: Förutom grön för jakande/positivt och rött för nekande/negativt (o.d.) har jag försökt att tona ner färger (bakgrundsfärger osv) så mycket som möjligt i applikationen för att framhäva huvudfunktionen med applikationen - kommunikation med bilder. Här är standardbakgrundsfärger satt i förhållande till ordklass enligt Blissymbolics Communication International rekommendatior i fråga om färgval och ifråga om framhävande av kontrast. Det är viktigt för personer med synnedsättning. Om man inte är nöjd med dessa färger kommer det att vara möjligt att ställa in sina egna färger för de olika ordklasserna. En tanke är att tillåta bakgrundsfärginställning på bildnivå, men jag får se om det är något som får avvaktas med för att hinna med annat som är viktigare.
Grafiska element: Ikoner använder jag en uppsättning ikoner som jag kan styla vid behov, vad gäller fyllnadsfärg, kantfärg, storlek osv. Eftersom alla ikoner som används i applikationen tillhör samma uppsättning som följer de en gemensam stil. Det är möjligt att jag behöver skapa någon enstaka ikon själv och då försöker jag följa samma stil isåfall. Förutom ikoner är det väl loggan, som kanske kommer upp på startupscreenen, och kanske kan finnas med som en tonad variant som bakgrund på sidorna, men förutom det vill jag inte ha några grafiska element i applikationen då jag vill fokusera på de grafiska element som kommunikationssymbolerna själva utgör. Få saker att hänga ihop eller sticka ut: Färger som används är mest vitt/grått/svart för att låta kommunikationssymbolerna vara de som sticker ut. Bakgrundsfärgen för de olika klasserna finns för att hjälpa användaren att tolka symbolerna bättre. Att andra färger saknas i stor utsträckning framhäver kommunikationssymbolerna och dessas betydelser. Vissa bilder länkar till nya sidor. För dessa har jag valt att ge största möjliga kontrast (svart bakgrund, vit text) till skillnad från vanliga bilder (svag grå textfärg på befintlig bakgrund) för att tydligt märka ut vilka bilder som är länkar och vilka som inte är det, men att det ändå inte stör färgavkodningen och utläsningen av själva teckensymbolerna. Ett förslag var att kanske utforma sidlänkarna som mappar, istället, så hållar jag inte med personligen, så avvaktar jag med den ändringen När applikationen väl testas på slutanvändaren finns möjlighet att ta in kommentarer och anpassa applikationen ytterligare. Den tillgängliga ytan är begränsad och jag vill att så stor del av ytan som möjligt ska kunna utgöras av symboler. Topp-listen ska därför vara enkel att gömma och visa med en enkel sveprörelse. Jag vill att applikationen ska vara så förutsägbar som möjligt så att den kan användas direkt, men även som effektiv som möjlig utan onödiga extrasteg/extraklick osv för de mest vanliga och centrala funktionerna där själva kommunikationen med hjälp av navigeringsvyn är den absolut mest centrala. Ingenting i applikationen ska vara överraskande då applikationen är byggd för att underlätta kommunikation. Det ska förstås vara visuellt tilltalande så att man inte undviker att kommunicera för att det "inte ser snyggt ut". Jag hade velat göra en del animationer/transitioner men det hinner jag troligen inte med innan projektet ska redovisas. Sammanfattning förbättringspunkter. Jag tar till mig informationen inför skapandet av kommande vyer, men identifierade inte så många förbättringspunkter i navigeringsvyn/topp-listen. Det var tre punkter som framkom: 1. Behövs statusikonen för att användaren är inloggad i databasen? Ursprungstanken är att det ska ge en hint till användaren om vad som är möjligt att göra och vad som inte är det. Det är inte helt enkelt att "förklara" ikonens funktion (varken visuellt eller med ord) och det kanske är ett tecken på att den inte ska finnas med. Det kommer finnas anledning att fundera över detta innan applikationen släpps skarpt. 2. Topp-listens navigeringstexter över vilken sida man befinner sig på och hur man tar sig till nästa/föregående sida med swipe-rörelse. Det var min fundering - ska man även kunna klicka på sidrubriktexterna i denna lista och behöver de isåfall vara utformade som knappar. Den feedback jag fick var att de absolut ska vara klickbara men att det inte alls är nödvändigt, på grund av placering och utseende, att göra ytterligare för att få dem att se ut som knappar.
Jag kommer att följa förslaget från feedbacken. 3. Någon reagerade på de olika utseendena för bilder som länkar till nya sidor och bilder som inte gör det. Efter att jag förklarade tyckte personen inte att det framgick tydligt nog att det ena var en sidlänk, och föresläg en mappformad figur istället. Jag har storleken att ta hänsyn till så att inte ramar osv orsakar att symbolen måste göras mindre. När man använt appen 10 sekunder förstår man att det ena utseendet leder till nya sidor och det är även tydligt nog för någon med ev. synnedsättning. Så jag tänker inte ändra detta nu, men när appen väl testas av slutanvändaren så finns det naturligtvis möjlighet att i efterhand enkelt ändra detta i CSSinställningarna.
På följande sidor följer några skärmdumpar av applikationen som den ser ut nu.