MMI: H5

Bij het detailontwerp proces stel je de klein detaai voor. Je let op dingen die je programma in elkaar zouden brengen zoals kleur, vorm en stijl.

De doelen van het detailontwerp proces zijn dat de programma goed contrast inhoudt, dus geen grijs op wit tekst. En dat in het algemeen de UI goed leesbaar is.

 

TODO

Advertisements

MMI: H4

Scherm 1

+------------------------------------------------------+
|                                                      |
|                                                      |
|                        WELKOM                        |
|                                                      |
|                                                      |
|                           +                          |
|                           |                          |
|          +------+         |          +-----+         |
|          | HAVO |         |          | VWO |         |
|          +------+         |          +-----+         |
|                           |                          |
|                           +                          |
|                                                      |
|                                                      |
+------------------------------------------------------+

Scherm 2

+----------------------------------------+
|                                        |
|  Profiel Keuze                         |
|                                        |
|                                        |
|            +       +      +            |
|            |       |      |            |
|       C&M  |  E&M  | N&G  |  N&T       |
|            |       |      |            |
|            +       +      +            |
|                                        |
|  <---+                          +--->  |
|                                        |
+----------------------------------------+

Scherm 3

+--------------------------------------+
|                                      |
|  Je verplichte vakken:               |
|                                      |
|   X  XXXXXXXXXXXXXXXXXXXXXXX         |
|                                      |
|   X  XXXXXXXXX  XXX                  |
|                                      |
|   X  XXXXXXXXXXXX                    |
|                                      |
| <---+                          +---> |
|                                      |
+--------------------------------------+

Scherm 4

+--------------------------------------+
|                                      |
|  Kies je bijvakken:                  |
|                                      |
|   X  XXXXXXXXXXXXXXXXXXXXXXX         |
|                                      |
|   X  XXXXXXXXX  XXX                  |
|                                      |
|   X  XXXXXXXXXXXX                    |
|                                      |
| <---+                          +---> |
|                                      |
+--------------------------------------+

Scherm 5

+--------------------------------------+
|                                      |
|  Overzicht:                          |
|                                      |
|   XXXXXXXXXXXXXXXXXXXXXXX            |
|                                      |
|   XXXXXXXXX  XXX                     |
|                                      |
|   XXXXXXXXXXXX                       |
|                                      |
| <---+                          +---> |
|                                      |
+--------------------------------------+

MMI: H3

De analyse fase dient voor het voor plannen van wat je wilt ontwerpen. Je vraagt af wat de gebruiker met je programma wilt bereiken en je werkt rond dat heen. Je denkt wat de gebruiker zou doen als hij je interface zou zien en je past het vervolgens na.

De stappen volgen zo uit:

  • Analyseren
  • Uitvoeren

Voorbeeld: HAVO profiel keus app

Use cases

Title: Study choice helper
Description: The student views the studies currently available for him to pick. Then he selects the studies and picks them.
Primary Actor: Student
Preconditions: Student is HAVO level
Post conditions: Student has picked their classes
Main
Success Scenario:
1. Student selects “Help me pick my courses” from the menu.
2. System displays list of studies available for picking.
3. Student selects one or more classes he wants to register for.
4. Student clicks “Submit” button.
5. System registers student for the selected courses and displays a confirmation message.
Extensions: 2a. Combination of courses is not allowed.
— 2a1. System displays error message saying combination not allowed, and provides the reason & how to rectify if possible.
— 2a2. Student either backs out of this use case, or tries again after rectifying the cause.

5a. Some courses could not be picked.
— 5a1. System displays message showing which courses were registered, and which courses were not registered along with a reason for each failure.

Frequency of Use: Single use with option to use again
Owner: Max Marshall
Title: Results screen
Description: The student views the calculated available studies and exits the app or goes back to adjust their input.
Primary Actor: Student
Preconditions: Student has inputted their study choices
Post conditions: Student is has been informed about their available choices
Main
Success Scenario:
1. Student is presented their available studies.
2. System asks if the student is satisfied with the results.
2a. Student is satisfied with the results.
— 2b1. Student clicks “Exit” button.
— 2b2. App gracefully closes itself.
Extensions: 2b. Student is not satisfied with the result.
— 2a1. System goes back to input screen.
— 2a2. Student adjusts their input.
Frequency of Use: Single use with option to use again
Owner: Max Marshall

Taakmodel

  1. Eigen studie kiezen
    1. Het niveau noemen
    2. De aantrekkelijk studies noemen
    3. Aangeven als het resultaat goed is
      1. Zo ja, afronden
      2. Zo niet, naar stap 2 gaan
  2. Afronden

Gebruikersprofiel

Kenmerk Beschrijving
Psychologische kenmerken
Cognitieve stijl verbaal visueel
Houding t.o.v. taak positief neutraal negatief
Kennis en ervaring
Opleidingsniveau hoog middel laag
Typvaardigheid hoog middel laag
Ervaring met computers hoog middel laag
Kennis vreemde talen hoog middel laag
Werk- en taakeigenschappen
Bekendheid met taak hoog middel laag
Systeemgebruik verplicht facultatief
Training cursus handleiding
Lichamelijke kenmerken
Geslacht man vrouw
Leeftijd oud middelbaar jong
Gezichtsvermogen goed redelijk slecht
Motoriek goed redelijk slecht

Programma van eisen

  1. Het systeem moet alle mogelijke studiekeuzes van zichtbaar maken op het scherm.
  2. Het systeem moet de mogelijkheid hebben om problemen met de keuzen aan te geven.
  3. Het systeem moet het mogelijk maken foute keuzes te herstellen.
  4. Het systeem moet goed leesbare teksten tonen.

MMI: H1 en H2

MMI staat voor Mens Machine Interface.

Vakgebied MMI is bedoelt om de mens met de machine te laten interacten

Een interface is het ding dat de mens gebruikt om met de machine ter interacten,

Een voorbeeld ervan is een toetsenbord.

Een informatie systeem is de logica achter het interface.

Ontwerpers van informatie systemen moeten heel goed de gebruikerskant in de gaten houden omdat anders krijg je het dat de informatie systeem tegen het gebruiker werkt.

Een goede ontwerp zou bvb een QWERTY toetsenbord zijn, het past perfect voor een aantal talen. Een slechte ontwerp zou een slider gebruiken voor het invoer van een telefon nummer.

MMI is vooral niet een informatie verwerking systeem, het is een interactie systeem.

MMI is een belangerijk deel van programmas. Je moet voorstellen hoe de mens reageert voor verschillende menu’s/knoppen.

Python voor beginners Deel 2

def – kort voor definition; een sub programma.

return – geeft aan waarde naar de def.

argument – invoer voor een def.

Opdracht

Maak een programma waarbij de lengtes van de rechthoekzijden worden opgevraagd en de bijbehorende oppervlakten van de vierkanten worden getoond plus de opper- vlakte van het vierkant van de schuine zijde.

import math

adj = int(input("Size of adjacent of a right triangle: "))
opp = int(input("Size of opposite of a right triangle: "))

hyp = math.sqrt(adj+opp)

print ('Size of hypotenuse = %d\n '
       'Area of adjacent = %d\n'
       'Area of opposite = %d\n'
       'Area of hypotenuse = %d\n'
       % (hyp, adj*adj, opp*opp, hyp*hyp))

Python pacman

from tkinter import *
class Player():
def __init__(self, master, radius, xcoordinate=100, ycoordinate=100):
self.master=master
self.xcoordinate = xcoordinate
self.ycoordinate = ycoordinate
self.radius = radius
self.master.title(“World”)
self.master.bind(‘<Up>’, self.moveUp)
self.master.bind(‘<Down>’, self.moveDown)
self.master.bind(‘<Right>’, self.moveRight)
self.master.bind(‘<Left>’, self.moveLeft)
self.draw()

def moveUp(self, event):
self.canvas.move(self.oval_id, 0, -10)

def moveDown(self, event):
self.canvas.move(self.oval_id, 0, 10)

def moveRight(self, event):
self.canvas.move(self.oval_id, 10, 0)

def moveLeft(self, event):
self.canvas.move(self.oval_id, -10, 0)

def draw(self):
self.canvas = Canvas(self.master, width=500, height=500,
borderwidth=0,highlightthickness=0, bg=”black”)
self.canvas.grid()
self.oval_id=self.canvas.create_oval(self.xcoordinate-self.radius,
self.ycoordinate-self.radius,
self.xcoordinate+self.radius,
self.ycoordinate+self.radius,
fill=”yellow”)

class client(Tk):
def __init__(self):
super().__init__()
def draw_player(self, x, y, r, **kwargs):
return self.create_oval(x-r, y-r, x+r, y+r, **kwargs)

Canvas.draw_player = draw_player

master=Tk()
pacman = Player(master, 50)
master.mainloop()

from tkinter import *
import time, sched

class Player():
def __init__(self, master, radius, xcoordinate=100, ycoordinate=100):
self.master=master
self.xcoordinate = xcoordinate
self.ycoordinate = ycoordinate
self.dx=0
self.dy=0
self.radius = radius
self.master.title(“World”)
self.master.bind(”, self.moveUp)
self.master.bind(”, self.moveDown)
self.master.bind(”, self.moveRight)
self.master.bind(”, self.moveLeft)
self.draw()

def move(self):
print (str(self.xcoordinate))
if self.xcoordinate > 10 and self.xcoordinate < 490 and self.ycoordinate > 10 and self.ycoordinate < 490 :
self.canvas.move(self.oval_id, self.dx, self.dy)
else:
self.dx = self.dx*-1
self.dy = self.dy*-1
self.dx = self.dx*-1
self.dy = self.dy*-1
self.canvas.move(self.oval_id, self.dx, self.dy)

self.xcoordinate=self.xcoordinate+self.dx
self.ycoordinate=self.ycoordinate+self.dy

def moveUp(self, event):
self.dx=0
self.dy=-1

def moveDown(self, event):
self.dx=0
self.dy=1

def moveRight(self, event):
self.dx=1
self.dy=0

def moveLeft(self, event):
self.dx=-1
self.dy=0

def draw(self):
self.canvas = Canvas(self.master, width=500, height=500,
borderwidth=0,highlightthickness=0, bg=”black”)
self.canvas.grid()
self.oval_id=self.canvas.create_oval(self.xcoordinate-self.radius,
self.ycoordinate-self.radius,
self.xcoordinate+self.radius,
self.ycoordinate+self.radius,
fill=”yellow”)

class client(Tk):
def __init__(self):
super().__init__()
def draw_player(self, x, y, r, **kwargs):
return self.create_oval(x-r, y-r, x+r, y+r, **kwargs)

Canvas.draw_player = draw_player

master = Tk()
pacman = Player(master, 50)

def m():
pacman.move()
master.after(10, m)

master.after(2000, m)

master.mainloop()

RPI voor beginners Deel 1. Functions

Sequentie

print “Kwadraat berekenen”

n = int(raw_input(“Voer een getaal in: “))
nsquared = n*n

print “Het kwadraat van ” + str(n)+” is “+str(nsquared)

Herhalen

print “Kwadraat berekenen”

while 1:
n = int(raw_input(“Voer een getaal in: “))
nsquared = n*n

print “Het kwadraat van ” + str(n)+” is “+str(nsquared)

Herhalen 2

print “Kwadraat berekenen”

repeatAmount = int(raw_input(“Hoe vaak wil je een kwadraat uitrekenen? “))

c = 0
while c < repeatAmount:
c = c+1
n = int(raw_input(“Voer een getaal in: “))
nsquared = n*n

print “Het kwadraat van ” + str(n)+” is “+str(nsquared)

print “Eind programma”

Keuze

print “Kwadraat berekenen”

n = int(raw_input(“Voer een getaal tussen de 0 en 10 in: “))

while n > 10 or n < 0:
if n > 10:
n = int(raw_input(“Kan niet groter dan 10 zijn: “))
if n < 0:
n = int(raw_input(“Kan niet kleiner dan 0 zijn: “))

nsquared = n*n

print “Het kwadraat van ” + str(n)+” is “+str(nsquared)