Elektronisk publicering TNMK30
Muddycards ERD MySQL Säkerhet. Förra gången
Idag Muddy cards resultat MySQL-kopplingar mellan tabeller Usability - användbarhet Interaktionsdesign Projektuppgift.
Muddy Cards Många positiva kommentarer kring upplägg Vill ha mer djup, etc Labbhandledning, bra/dåligt Labbar, instruktioner.
MySQL - kopplingar Finns flera sätt att lösa labben
Person id namn telefon 6 Rocksteady 555-2222 54 Beebop 555-2222 Hus gata nummer Storgatan 2 Rydsvägen 240 ägare 54 54 id namn efternamn gata nummer Person 1 N äger Hus
Person Hus id namn telefon 6 Rocksteady 555-2222 54 Beebop 555-2222 gata nummer Storgatan 2 Rydsvägen 240 id 1 8 Äger person-id hus-id 6 8 54 8 54 1 id id namn efternamn gata nummer Person N äger M Hus
Usability sv. användbarhet....the effectiveness, efficency and satisfaction with which specified users can achieve specified goals in particular environments... - ISO DIS 9241-11
Usability Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design?
Varför usability? Increased user efficiency and satisfaction Higher revenues through increased sales Increased productivity Decreased training and support costs Reduced development time and costs Reduced maintenance costs
Designprinciper Både för egen design och utvärdering av andras. Verktyg, guide, tumregler. I huvudsak från: Norman, D. 1998. The Design of Everyday Things. Nielsen, J. 1993. Usability Engineering. Shneiderman, B. 1998. Designing the User Interface.
För att hjälpa människor att nå, lära sig och komma ihåg systemet: 12 design principer 6. Control 7. Feedback 1. Visibility 2. Affordance 3. Consistency 4. Familiarity För att ge dem känslan av att ha kontroll, veta vad som ska göras och hur det ska göras: 5. Navigation För att ge dem ett säkert sätt att arbeta: 8. Recovery 9. Constraints På ett sätt som passar dem: 10. Flexibility 11. Style 12. Conviviality
1. Visibility Gör synligt: vilka funktioner som är tillgängliga vad systemet gör Det är lättare att känna igen saker än att komma ihåg (regognize vs recall) Om det inte går att göra synligt kan man göra det observerbart (kanske genom ljud eller känsel).
2. Consistency Var konsekvent vid design och se speciellt till att liknande funktionalitet visas och fungerar på samma sätt Både konceptuell och fysisk konsekvens är viktig
3. Familiarity Använd språk och symboler som den tänkta användaren känner till Där detta inte är möjligt använd en metafor för att hjälpa dem överföra liknande och relaterad kunskap från en känd domän.
4. Affordance Designa så att det är självklart vad artefakten är till för Affordance syftar på de attribut en artefakt har (eller upplevs ha) och hur dessa attribut relaterar till hur artefakten kan användas
5. Navigation Tillhandahåll stöd för att låta användare förflytta sig i systemet: kartor, direktiv, informationsskyltar, etc.
6. Control Gör klart vem eller vad som har kontrollen och tillåt användaren att ta kontroll Förbättras genom att ha en klar logisk koppling mellan handling och effekt.
7. Feedback Snabb återkoppling från systemet till användaren talar om vilken effekt handlingar fick Konstant och konsekvent feedback ökar kontrollkänslan
8. Recovery Ge alltid möjlighet att ångra och återhämta handlingar (speciellt fel och misstag), snabbt och effektivt
9. Constraints Begränsa möjligheterna så att användaren inte försöker (eller kan) göra olämpliga saker Specifikt bör man hindra användare från att åstadkomma allvarliga fel genom att begränsa tillåtna handlingar och fråga en extra gång innan genomförandet av kritiska operationer
10. Flexibility Tillåt flera sätt att åstadkomma saker för att tillmötesgå användare med olika erfarenhet och intresse i systemet Tillhandahåll möjligheten att ändra hur systemet ser ut och beter sig för personalisering
11. Style Designen bör vara fin och tilltalande. (Kanske även minimalistisk.)
12. Conviviality Interaktiva system ska vara artiga, vänliga och allmänt behagliga Inget förstör upplevelsen av att använda ett system mer än aggressiva meddelanden och abrupta avbrott Designa för hövlighet.
För att hjälpa människor att nå, lära sig och komma ihåg systemet: 12 design principer 6. Control 7. Feedback 1. Visibility 2. Affordance 3. Consistency 4. Familiarity För att ge dem känslan av att ha kontroll, veta vad som ska göras och hur det ska göras: 5. Navigation För att ge dem ett säkert sätt att arbeta: 8. Recovery 9. Constraints På ett sätt som passar dem: 10. Flexibility 11. Style 12. Conviviality
Top Ten Mistakes in Web Design 1. Bad Search 2. PDF Files for Online Reading 3. Not Changing the Color of Visited Links 4. Non-Scannable Text 5. Fixed Font Size 7. Anything That Looks Like an Advertisement 8. Violating Design Conventions 9. Opening New Browser Windows 10. Not Answering Users' Questions 6. Page Titles With Low Search Engine Visibility
Web usability Form Labels Work Best Above The Field Users Focus On Faces Quality Of Design Is An Indicator Of Credibility Most Users Scroll Blue Is The Best Color For Links The Ideal Search Box Is 27- Characters Wide White Space Improves Comprehension Effective User Testing Doesn t Have To Be Extensive Informative Product Pages Help You Stand Out Most Users Are Blind To Advertising.
Interaktionsdesign Målgrupp Wireframe Scenario Design - tips, trix och att-tänka-på
Målgruppsanalys Vilka är användarna? Vad kan de vad kan de lära sig? Vad har de för generell bakgrund? Vad har de för mål eller syfte? Vad är de i för miljö(-er)? http://www-und.ida.liu.se/~hdisx4/ episodes/malgruppsbeskrivning.m4a
En wireframe är en enkel ritning som visar var olika element ska vara placerade på en webbsida. Det är enklare att ändra i layouten av webbsida när den är en wireframe tidigt i designprocessen än att ändra i en mer komplex design senare. gomockingbird.com Wireframes
Scenario Steg-för-steg beskrivning av hur användaren gör för att uppnå olika mål Ex: Vill lägga till film Vill veta vilket årtal en film är producerad Vill ta bort film från databas Används med fördel tillsammans med Wireframes (kan då kallas storyboard).
Läsbarhet ~65 tecken per rad Radhöjd på ~1.5 em Generellt ger serifer god läsbarhet Det finns typsnitt som är designade för att användas på skärm, t ex Georgia, Verdana Vänsterjusterad text lättare att läsa än marginaljusterad (som ser bättre ut) Kontrast och färger avgör också.
Serif vs Sans serif
Gemener vs Versaler
Positive vs Negative
Luftigt vs Tätt
Kontrast
Färgblindhet Röd - Grön, vanligast, II och III Blå - Gul, ovanlig, IV Helt färgblind, mycket ovanlig, V
Det går inte snabbare att förstå en negation Använd inte inte om du inte måste
Grid http://www.sprymedia.co.uk/article/grid
Layout Användare förväntar sig att saker finns på samma ställe(-n) som de brukar Navigering Logo Sök Sign in/up
Färgschema Håller ihop en design Kunder har ofta redan en färdig Bra att ha med sig från början eller att skapa tidigt i design processen colorschemedesigner.com
Projektuppgiften 2-3 studenter per grupp. Samma ambitionsnivå. Design och implementation av en databasdriven webbplats Utökad filmdatabas, blogg, forum, webbplats för ett företag, webbshop Via gränssnitt ska man kunna lägga till, ta bort, och ändra i innehåll på webbplatsen Använda och fördjupa kunskaper från labbarna. Konkurrensanalys och arbetsrapport 3 hp 2 veckors arbete heltid 160 h för två studenter Bokade tider med handledning Deadline 22/12.
Användbara länkar http://www.webstyleguide.com/ http://www.useit.com/alertbox/9605.html http://www.useit.com/alertbox/20030825.html http://www.useit.com/homepageusability/guidelines.html http://www.jnd.org/ http://www.cs.umd.edu/~ben/fun-p48-shneiderman.pdf http://infosthetics.com/ http://www.uxbooth.com/blog/10-usability-lessons-from-steve-krug s-dont-make-me-think/ http://www.sensible.com/ http://www.asktog.com/ http://www.cooper.com http://usabilitybok.org/ http://interactions.acm.org/ http://www.ijdesign.org/ojs/index.php/ijdesign/
Tack och lycka till!