~~NOTOC~~
{{ :images:banner_uiux.jpg |}}

===== Interaktionsdesign UI & UX =====

==== Introduktion til UI og UX ====

Interaktionsdesign omhandler de overvejelser der går på at designe den __interaktion__ der sker mellem et softwaresystem og en bruger. Forkortelser som essentielle for dette område er: UI og UX.

  * UI - User Interface (Brugerflade)
  * UX - User eXperience (Brugeroplevelse)

UI (User Interface) og UX (User Experience) omhandler designet af digitale produkter med fokus på brugeren. UI handler om det visuelle og interaktive design, såsom knapper, farver og layout, mens UX fokuserer på den samlede oplevelse, herunder brugervenlighed, effektivitet og tilfredshed. Målet med UI og UX er at skabe løsninger, der er intuitive, funktionelle og behagelige at anvende.

==== Gestaltlovene ====

Gestaltlovene stammer fra gestaltpsykologien og beskriver, hvordan mennesker opfatter og organiserer visuelle indtryk. Grundtanken er, at vi opfatter helheder frem for enkelte dele. Hjernen grupperer automatisk elementer ud fra principper som nærhed, lighed, kontinuitet og figur–grund. Gestaltlovene anvendes ofte i design, da de forklarer, hvordan brugere intuitivt tolker visuelle strukturer og sammenhænge.

Gestaltlovene kommer fra gestaltpsykologien (Tyskland, ca. 1910–1930)

De er udledt gennem observation og perceptionseksperimenter

Lovene beskriver, hvordan mennesker automatisk organiserer visuelle informationer

Lovene er altså ikke matematiske regler, men psykologiske principper, der beskriver, hvordan hjernen typisk organiserer sanseindtryk.


  * Nærhed (Proximity) : Elementer, der er tæt på hinanden, opfattes som hørende sammen.
  * Lighed (Similarity) : Elementer, der ligner hinanden (fx form, farve eller størrelse), opfattes som relaterede.
  * Kontinuitet (Continuity) : Vi opfatter linjer og mønstre som fortsættende i en jævn retning frem for afbrudte.
  * Lukkethed (Closure) : Hjernen har tendens til at udfylde manglende dele, så ufuldstændige former opfattes som hele.
  * Figur–grund (Figure/Ground) : Vi skelner mellem et objekt (figur) og dets omgivelser (baggrund).
  * Fælles skæbne (Common Fate) : Elementer, der bevæger sig i samme retning eller ændrer sig samtidig, opfattes som sammenhørende.
  * Symmetri : Symmetriske elementer opfattes som stabile og sammenhængende former.
  * Prægnans (Good Form / Simplicity)

  * {{ :docs:review_of_gestalt_principles_used_in_computer_games.pdf |}}
  * [[https://www.pocketgamer.biz/seven-psychology-inspired-tips-for-perfect-video-game-design/|Seven psychology-inspired tips for perfect video game design]] 
  * [[https://www.gamedeveloper.com/design/game-design-and-gestalt-laws|Game design and Gestalt laws]] - Sita Vriend
  * {{ :docs:applying_gestalt_principles_to_user.pdf |Applying Gestalt Principles to User Experience Design in Computer Games}} - Aleksandra Godek

----

==== Jacob Nielsen ====

Jacob Nielsen er en internationalt anerkendt ekspert inden for usability og UX-design. Han er især kendt for sine ti usability-heuristikker, som fungerer som generelle retningslinjer for brugervenligt design. Heuristikkerne hjælper designere med at identificere og undgå usability-problemer og anvendes bredt i udviklingen og evalueringen af digitale brugergrænseflader.

Gestaltlovene forklarer, hvordan brugere opfatter visuelle elementer, mens Jacob Nielsens heuristikker anvender denne viden til konkrete designprincipper, der forbedrer brugervenlighed.


  * Gestalt = psykologien
  * Nielsen = designreglerne baseret på psykologien


  * HCI - Human Computer Interaction (Interaktion mellem Menneske & Computer)



  * https://aelaschool.com/en/interactiondesign/10-usability-heuristics-ui-design/
    * {{ :docs:nielsens_heuristics_10_usability_principles_to_improve_ui_design.pdf |(som PDF)}}
  * [[https://en.wikipedia.org/wiki/Principle_of_least_astonishment]]

----


==== Game Interfaces To Explore ====

  * https://interfaceingame.com/
  * https://gameuidatabase.com/

==== Design af interaktion ====


  * [[https://uxplanet.org/these-12-games-will-put-your-design-skills-to-the-test-81d99dc14b15|12 games for UI/UX designers]]


----

==== Øvelser ====

  * [[uiux:ui_in_godot|UI & Interaktions design i Godot]]


==== Some designs ====

  * https://writemonkey.com/features.php

==== Resourcer ====

  * https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/human-computer-interaction-brief-intro

==== Øvelse ====

  * [[feedback_ui|Feedback i brugerinterface]]