Course: GUI, web design, psychology and human efficiency

Towards perfect interfaces and webpages, using psychology of movement, perception, language, learning and thinking. Experience, usable, design, intuitive, look and feel, marketing, personal opinions and technology are put aside for one moment. Concrete requirements, direct application using 470 simple and known interfaces, evaluation of common sense and ... opinions and interfaces of participants






Towards perfect interfaces and web pages, using psychology of movement, perception, language, learning and thinking. Experience, usable, design, intuitive, look and feel, marketing, personal opinions and technology are put aside for one moment. Concrete requirements, direct application using 470 simple and known interfaces, evaluation of common sense and ... opinions and interfaces of participants. In general interface design is a rather practical profession. Just tell me what to do. Guidelines, norms and standards are tools frequently asked for. Real experts know that that will not work. Many problems have been solved using common sense and trial and error. But you cannot find a cure for a serious disease using common sense and trial and error. For interface design this was proved in


Practical basis

Can a training based on science be practical? Yes, it can. A theory is valid only when you can test it. Usually that is done using 'test items' for experiments. However, you also can make theory concrete using requirements and design solutions. Secondly, hundreds of interfaces are shown that straightforwardly are compatible or incompatible with the theory.
  • Many interfaces are from
  • One well known example is Netherlands Railways train ticket vending machine. This is a typical Human Efficiency interface, perfect for expert users and passengers of 92 years of age as well.
  • Windows and Office provide many examples of course. There are few Mac examples. Of course, Mac’s design and technology is better. The interface is much more practical. But the Mac uses traditional concepts as a desktop, menus and tabs as well. Most participants use Windows.


  • Some interfaces were specially designed for this training. These examples are pure; they show the application of psychology without taking into account other considerations. It takes a few seconds to understand the principles.
  • Other examples are designs of participants, of course.
  • To top.


    Program

    The total program would take four days. Fortunately two days will do to pick up the general idea. The interfaces and ics brought forward by the participant determine which parts of the total program will be selected.

    Input design and psychology of movement

  • Reduce input: selection of options versus entry of commands, size of buttons (not standards for minimal sizes but how to use size, flexibility of size),
  • Reduce finger travel time: multiple clicks, , entry of numbers, subsequent positions of buttons, keyboard – pointing device switches.
  • How to arrange (screen) buttons: Why you should never use alphabetical arrangements, invisible structures for fingers versus visible structures for eyes and brains, Why there is no need to put the OK button on a standard position.
  • Evolution: Why voice input can not solve the interface input problem., From rigid database entry towards … .....
  • Screen design and psychology of perception
  • Perceptual properties of interface design elements: some physiological data on perception of size, form (icons, fonts, the presentation of a date, codes and numbers), luminance, colour (when to use which colour, colour for control of attention), contrast and dynamics. Application with interfaces compatible with this knowledge and, of course interfaces not compatible.
  • Reduce eye travel time: Where to position information, Why eye tracking research is not relevant to design, How to control eye movements, Why there is no need to start at the upper left hand cornerHow to present complex information in such a way that perception time is 233 milliseconds.
  • Reduce screen crowdedness: Crowdedness is not the amount of information on the screen but …, A screen is quiet when ….
  • How to arrange information on screens: tests for visual structure, design of a line (alignment, tabs), the presentation of lists (horizontal, vertical, words or icons), visual structures (one dimensional, two dimensional, three dimensional, frames), Why you never should use conventional tabs.
  • Evolution: From direct views in databases using rigid consistent squares on screens towards ….
  • Text design

  • How to reduce the number of words
  • How to identify incomprehensible words (incorrect terminology, homonyms, jargon, terms describing form versus terms describing content, affirmative wording, and specific wording.

  • How to arrange words in interfaces (risks of one word sentences, verbs and nouns), order of words, punctuation, and design of icon language.
  • Evolution: not voice input but restricted artificial language and application independent interfaces.
  • To the top.



    Help design and psychology of learning

  • Reduce memory load: Which letter for a shortcut when two options start with the same letter?, How to reduce short term memory load, How to deal with passwords. Why Are you sure certainly is wrong and the only and best solution for that problem, fourteen requirements for the hourglass interface.
  • Why common help (tips, faq, wizards, help, assistants) can’t help. Learning psychological requirements for help and how the interface looks.
  • How to arrange information for learning: Why guidelines, norms, standards and consistency do not work. Which consistencies imposed by technology we are so used to that we do not notice them anymore. When does consistency work.
  • Evolution: From training how to press a button towards becoming an expert without noticing that.
  • To top.



    Interface concepts and psychology of thinking

  • Reduce mental load: How to reduced mental load? Let the computer do the computing does not go without saying at all. What design decisions should be made by the user and not by the interface designer?
  • Reduce thinking: Why you never should use a What you should do when designing for abstract contents. Virtual reality versus cognitive reality.
  • How to arrange information for thinking: What are the solutions for the navigation problem? How do they look on a screen?
  • Evolution:
  • To the top..

    Method

    The program mentioned above is used when there is no input from participants. A disadvantage of taking the input of the participants is that at first sight the program becomes chaotic. However, from the participants point of view, chaotic it will be any way. Psychology as starting point is unusual and therefore, for most participants chaotic. In addition, learning is changing into a new situations, and one has to get used to the new situation. There is a very strong and reliable compass. There are five main roads only: human movement, perception, language, memory and thinking. A topic starts with an introduction (common knowledge, anecdote, a problem an attendee brings in). Psychological knowledge relevant to that ic is presented briefly. A short experiment with the attendees as subjects, may be performed. Then application using e.g. Windows, Office, design practice of the author and, preferably designs of the attendees.
    To top.



    Participants Psychological knowledge presented is not complicated. The most important requirement is open mindedness and a need for insight. All knowledge is immediately applied in concrete examples showing how to and how not to. Design aesthetics is important in design, however this course and many of the examples presented are designless. These requirements for attendees are more important than their background or roles in the design process.
    To the top.



    Aims

    The main goal of the course is to provide the attendees with psychological information and methodology they can use in creating and evaluating design solutions. The problem is not the complexity of this knowledge but open-mindedness for this unusual approach. The approach is not learning to apply guidelines but insight to estimate the psychological benefits and costs
    To the top.



    History of the training

    In the eighties the course focused on MS-DOS designs, in the nineties the focus changed to Windows and GUI and from 2000 internet applications were included. More than hundred courses have been given now, most of them in the Netherlands and Belgium (VIK) and some in other countries including Germany (Interact), UK and the USA (Software Quality).
    To the top..


    To the top.



    When and where?

    Outside the Netherlands the course is given in company or in cooperation with local institutes. In most cases a two days format is chosen.
    To the top.


    More applied psychology for GUI and webdesign

    GUI and webgrammar graphics statistics futur next generation infographics

    GUI and webaandacht sturing trekken kleurgebruik geel rood oranje infographics

    GUI and webgrammar for graphics icons pictograms signs infographics

    GUI and webdesktop bureaublad

    GUI and webantropometrie handen hand vriendelijk in de hand houden

    GUI and webGUI graphical user interface command user commandline prompt MS-DOS

    GUI and webguidelines normen richtlijnen standaarden design usability

    GUI and webhandelingspsychologie Parreren leerpsychologie kwalitatief

    GUI and webpieptonen help leerpsychologie dimmen van opties

    GUI and webkeep is stupid simple kiss eenvoudig simpel

    GUI and webnavigatie met menu of tabel startpagina desktop

    GUI and web

    GUI and webvisuele auditieve tactiele communicatie sociale media ringtones trillen

    GUI and webopenbaar vervoer betalen ovchikpkaart toekomst infographics

    GUI and webtag clould psychologie gebruiksvriendelijkheid

    GUI and websturing trekken aandacht

    GUI and webskimmen pasfraude NS automaat beleving openbaar vervoer

    GUI and webtoetsen toetsenborden typen ergonomie

    GUI and websmartphone

    GUI and webmetaforen antropomorf denken begrijpen

    GUI and webduidelijk onduidelijk woorden termen jargon

    GUI and webhomepage startpageweb map structuur

    GUI and webtest kennis psychologie


    To top.

    More psychology for:

    ICT



    x Invoer Morsesleutel Toekomst        multidimensionaal graphic   







    Public design



     NS treinkaart automaat b100 betalen openbaar vervoer NS treinkaart automaat b8060 betalen openbaar vervoer  IMO international maritime organisation muster station sign plattegrond IKEA water vaar verkeersbord maximaal hoogte water vaar verkeersbord maximaal drie dik aanleggen water vaar verkeersbord maximale doorvaart hoogte 3 meter experimenteel vertrektijden bord openbaar vervoer structuur openbare ruimten experimenteel vertrektijden bord openbaar vervoer atb etcs snelheidsbeheersing aandacht trekken water vaar verkeersbord verboden aanleggen water vaar verkeersbord maximale hoogte water vaar verkeersbord verboden 3 dik aanleggen met meer schepen trein vertrektijd perron NS CTA OV openbaar vervoer betalen ov-chipkaart toekomst grafische bestemmingen lijst metro ondergrondse lijn  structuur hoefijzer winkelcentrum 







    Icon/sign design



      3-d, perspectief,drie-dimensionaal verkeersbord toekomst parkeerverbod verkeersbord toekomst verboden inhalen verkeersbord toekomst maximum snelheid bepaalde 







    Psychologie



    helderheid voor betrouwbaarheid hersenen limgisch systeem en cortex aandacht trekken en aandacht sturen gebruik van de kleuren rood oranje en geel gevoeligheid van het oog voor kleuren humunculus mensmetafoor een mens in de zaadcel 







    Toekomst volgens psychologie

              







    Leren rekenen

    leren rekenen basisschool MAB rekenblokken toekomst onderwijs leren lezen leren rekenen supermarkt leren rekenen basisschool tellen op de vingers aftellen leren rekenen vleksom puntsom rekenonderwijs basisschool tientallig stelsel tellen op de vingers rekenonderwijs basisschool computer diagnostiek remedial teaching graphics for quantitative data next generation 







    Hogesnelheidstrein (ERMTS)

      ERMTS hoge snelheidstrein hsl ATB experimenteel interface voor machinist ERMTS high speed train control driver mmi ERMTS hoge snelheidstrein hsl ATB experimenteel interface voor achinist ERMTS hoge snelheidstrein hsl ATB experimenteel interface voor achinist 







    Wetenschappelijke verantwoording

     









    To the top.



    Search in humanefficiency.nl

    Examples of interfaces the
    trainer was involved with
    and contributed to.

    Road traffic signs

    Complex data

    graphic complex process presentation
    Upper right red,
    Close to disaster

    complex process presentation
    All OK.

    complex process presentation
    Upper right yellow low,
    take care!

    complex process presentation
    Upper right yellow high,
    take care!
    Source: Verhoef Holslag,
    2010.

    onderwijs leerling prestatie
    Source: LBS/Holslag Verhoef.

    graphic complex ultidimensional data
    Sourrce: Holslag Verhoef

    smiley complex multidimensional data
    How much information
    can be in one smiley?
    Source: Verhoef Holslag,
    2010.


    Design of tables


    Graphics for aesthetics,
    OECD house style.
    Source: OECD quarterly
    growth table.
    http://stats.oecd.org/Index.aspx


    No graphics, data only.
    Same data as previous
    table.

    tabel design
    Same data as previous
    table.
    Graphics for content.
    OECD, adapted by
    Verhoef for demo.


    Design of scales


    kleur rood geel oranje aandacht



    betrouwbaarheid zekerheid
    One variable,
    six parameters,
    233 milliseconds
    perception time.

    betrouwbaarheid zekerheid
    An effective problem solving
    tool.
    Source: Holslag & Verhoef.


    Portrait or
    landscape?

    train traffic control information portrait orientation
    What is better for a
    train traffic
    controler?
  • portrait ...
  • train traffic control information landscape orientation

  • ...landscape?

  • Source: Holslag & Verhoef.

    What is better
    for car driving?
    tom tom autonavigatie scherm
  • ... realistic landscape?
    Source: Tom Tom, 2010.


  • navigatie auto route reisplanner reizen
  • alphanumerical portrait
    ...?
  • In this case the best
    orientation is ...

    Source: Verhoef, 2010.

    navigatie ermts mmi dmi planning
  • abstract portrait ...?

  • Source: ETCS/Verhoef.

    Train traffic
    control


    How to present
    tracks and platforms?
    tracks and platforms train traffic controlers
  • This way?

  • tracks platforms train traffic controlers
  • Or this way?

  • Source: NS/Verhoef.

    Public transport signs




    Design of train indicators

    Departure in 30 min.

    ov reis info bord trein
    Grey half circle:
    Go shoping.
    Departure in 30 min.

    Departure in 15 min..
    ov reism info bord treinYellow 1/4 circle:
    Go to train.
    Departure in 15 min.


    Departure in 30 sec.

    Source: Amersfoort, The Netherlands, 2008.

    ov reis info bord trein
    Orange half circle:
    Hurry up!
    Departure in 30 sec.

    Source: Experimental
    designs, Verhoef 2010.


    OV-verstoringsinformatie kan niet (beter) want de OV-denk- en computersystemen gaan uit van een papieren jaardienstregeling. Dat spoorboekje kent geen verstoringen. Dit uitgangspunt is goed te zien op de huidige borden.

    More, click and go to: OV kan reizigers geen verstorings’informatie geven, volgens de psychologie


    Trains indicator Amsterdam approx. 1990-2010
    ov reis info bord trein
    Experimental design destinations indicator.
    Source: Verhoef.

    Design ticket vending


    Check in/out Dutch electronic public transport ticket system (trip costs, debit remaining, bye bye ).
    OV-chip check paal
    Experimental check in/out device.
    Source: Verhoef
    NS touch screen train ticket vending machine
    NS touch screen train
    ticket vending machine
    Routing problems
    solved using ...



    Ticket vending machine.
    Language optionfirst step
    (hierarchical solution)?
    Source: Belgium Railways.

    ns screen treinkaart automaat
    Ticket vending machine.
    Change language any time
    (parallel solution).
    Source: NS/ Verhoef.

    Netherlands Railways touch screen train ticket vending machine.

    It looks like a menu.
    However,
    no hierarchical steps.
    What is the structure?"

    Which button is
    to help whizzkids
    and it-specialists?
    Source: NS/Verhoef.


    coffee drink vending machine, use of gray out.
    The train ticket vending
    machine solution is general
    applicable. It also can
    be used for complex drink
    vending machines.
    Source: Verhoef.

    Road traffic signs


    To top of list of pictures.