Elektronisk publicering TNMK30

Storlek: px

Starta visningen från sidan:

Download "Elektronisk publicering TNMK30"

Jan-Erik Eklund
för 8 år sedan
Visningar:

1 Elektronisk publicering TNMK30

2 Muddycards ERD MySQL Säkerhet. Förra gången

3 Idag Muddy cards resultat MySQL-kopplingar mellan tabeller Usability - användbarhet Interaktionsdesign Projektuppgift.

4 Muddy Cards Många positiva kommentarer kring upplägg Vill ha mer djup, etc Labbhandledning, bra/dåligt Labbar, instruktioner.

5 MySQL - kopplingar Finns flera sätt att lösa labben

6 Person id namn telefon 6 Rocksteady Beebop Hus gata nummer Storgatan 2 Rydsvägen 240 ägare id namn efternamn gata nummer Person 1 N äger Hus

nummer Storgatan 2 Rydsvägen 240 ägare 54

7 Person Hus id namn telefon 6 Rocksteady Beebop gata nummer Storgatan 2 Rydsvägen 240 id 1 8 Äger person-id hus-id id id namn efternamn gata nummer Person N äger M Hus

Rydsvägen 240 id 1 8 Äger person-id hus-id 6 8 54

8 Usability sv. användbarhet....the effectiveness, efficency and satisfaction with which specified users can achieve specified goals in particular environments... - ISO DIS

9 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?

Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

10 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

11 Designprinciper Både för egen design och utvärdering av andras. Verktyg, guide, tumregler. I huvudsak från: Norman, D The Design of Everyday Things. Nielsen, J Usability Engineering. Shneiderman, B Designing the User Interface.

1998. The Design of Everyday Things. Nielsen, J. 1993.

12 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

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.

13 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).

komma ihåg (regognize vs recall) Om det inte går att göra

14 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

15 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.

16 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

attribut en artefakt har (eller upplevs ha) och hur

17 5. Navigation Tillhandahåll stöd för att låta användare förflytta sig i systemet: kartor, direktiv, informationsskyltar, etc.

18 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.

19 7. Feedback Snabb återkoppling från systemet till användaren talar om vilken effekt handlingar fick Konstant och konsekvent feedback ökar kontrollkänslan

20 8. Recovery Ge alltid möjlighet att ångra och återhämta handlingar (speciellt fel och misstag), snabbt och effektivt

21 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

22 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

23 11. Style Designen bör vara fin och tilltalande. (Kanske även minimalistisk.)

24 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.

25 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

26 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

27 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.

28 Interaktionsdesign Målgrupp Wireframe Scenario Design - tips, trix och att-tänka-på

29 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)? episodes/malgruppsbeskrivning.m4a

30 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

31 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).

32 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å.

33 Serif vs Sans serif

34 Gemener vs Versaler

35 Positive vs Negative

36 Luftigt vs Tätt

37 Kontrast

38 Färgblindhet Röd - Grön, vanligast, II och III Blå - Gul, ovanlig, IV Helt färgblind, mycket ovanlig, V

39 Det går inte snabbare att förstå en negation Använd inte inte om du inte måste

40 Grid

41 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

42 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

43 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.

44 Användbara länkar s-dont-make-me-think/

45 Tack och lycka till!

Relevanta dokument

Användarvänlighet? Användbarhet. Användbarhet! De vise männen. Användbarhet enl. ISO Bakom varje framgångsrik man

Användarvänlighet? Användbarhet. Användbarhet! De vise männen. Användbarhet enl. ISO Bakom varje framgångsrik man Användbarhet TNMK31 Användbarhet Användarvänlighet? Åtkomlighet Förenligt med och stöd för människans mentala funktionssätt Individualisering Hjälpresurser Är tätt kopplat till användargränssnitt, speciellt