Qualification:
Cambridge Advanced National in Computing (AAQ)
Unit:
F160: Fundamentals of Application Development
Certificate:
Computing: Application Development (H029 / H129)
5.3 - Human Computer Interface Designs, Documents and Diagrams
Watch on YouTube:
Data flow diagrams
Flowcharts
Visualisation diagrams
Wireframe diagrams
​There are four types of documents / diagrams you need to know that can be used to design human-computer interfaces: data flow diagrams (DFDs), flowcharts, visualisation diagrams and wireframe designs.
​
For each type of diagram, you need to know its components and conventions, when it is appropriate for use, and how to create it.
Each diagram is also effective for different uses and you must be able to consider how specific diagrams can be made more effective.
Human-Computer Interface Diagrams
Data Flow Diagrams
A data flow diagram (DFD) is a visual representation of how data is transferred within a system or organisation.
​​
They do not show decision logic or sequencing, but focus on where data comes from, where it goes and how it is processed.
​​
DFDs are typically categorised into Level 0 and Level 1 formats, which differ based on complexity.
Flowcharts
A flowchart is a diagram that shows the sequence of steps in a process using specific symbols.
​​
Flowcharts can be used as a project planning tool (section 3.2) to visualise workflows, task order and decision-making paths.
​​
It is also useful as a human-computer interface diagram to show the steps and decisions users may take as they interact with the application.
The video says '3.2d' because flowcharts also appear in section 3.2 as a project planning tool.
Visualisation Diagrams
Visualisation diagrams are graphical representations used to show the layout, structure and appearance of a software application's interface. They're often used for planning, design and feedback purposes.
​​
Traditionally, they would be drawn on paper in pencil and annotated, but modern diagrams are mocked up on a computer so they can be easily shared with team members and clients.
Wireframe Diagrams
Wireframe diagrams are basic visual guides used to represent the structure and layout of a user interface (UI) without any design styling. They focus on function, layout and interaction, not aesthetics.
​
Wireframe diagrams are used in the early design stages to plan the UI layout before visual design begins.
Questo's Questions
5.3 - Human Computer Interface Designs, Documents & Diagrams:
​​​
1. Explain what the purpose of data flow diagrams are, the difference between Level 0 and Level 1 and what makes them effective. [6]
​​​​​
2. Draw a wireframe diagram for the YouTube homepage. ​[3]
​​​​​​
3. Explain how visualisation diagrams are created and how they can be made more effective. ​[5]​
The first type of flowchart, the 'flow process chart', was developed by engineers Frank and Lillian Gilbreth in 1921. The book (and original movie) 'Cheaper by the Dozen' is about this couple.
Did You Know?
