Week 7 Lecture: User Interface and beyond!


User Interface: Visual Design Patterns

How a user and system i.e. computer interact with an input of software on any given device.


User Interface design is not just the consideration of graphics rather presenting users with the right tools to accomplish their goals. It is the configuration of solutions that solve common design problems. design patterns are standard reference points for sculpting a UI.

Navigating Patterns

When developing UI’s it is important to consider the following patterns in navigation:

  • Tabs: Navigation Tabs + Drop Down Tabs
  • Menu: Vertical, Horizontal and Accordion drop down menus.
  • Jumping in hierarchy: Shortcut Dropdown, Footers, breadcrumbs
  • Content: Carousel, Event Calendar, Article List





Week 6 Lecture: Scenarios


User Scenarios


User Scenarios are the stories played out by the development of User Personas and User Artefacts. They embellish on ‘outcomes’ of use, thoughts and exercises typically represented in visual form. Scenarios encapsulate that of a user’s goal, expectation and motivation actions and reactions.

An effective way to begin this process is by drafting post notes that might perhaps track different behaviours and stories of a user in the context of daily activity. A net of common problems solved and questions asked are crucial when accommodating a user to a system of all considerations. Despite potential failure to adhere to systems, an scenario good, bad or indifferent will only strengthen the use of information in the end.


Example of my written User Scenario to be fleshed out in visual form for my Design Document in the development of my App.


Screen Shot 2017-05-07 at 10.16.56 pm.png



Week 5 Lecture: Personas

User Persona:

The User Persona is the representation of the goals and behaviours of a hypothesised group of users. Such data can be collected from interviewed users, captured in one or two page descriptions of fictional details to make the personas realistic in character.

Screen Shot 2017-05-07 at 9.36.23 pm.png

Artefact Persona:

When compiling Artefact Persona data the following should be taken into account. What would said user be like? How would users first react when using the product, what behaviour needs preempting? How could you describe this product to a friend/ colleague? How doe it better than it’s current competitors?

Screen Shot 2017-05-07 at 9.52.41 pm.png


It is paramount that as a designer you check in with these personas. After all the experience of the interactive depends on user success driving processes upwards. This will enable ease, fluidity in production and fasten design solutions.



Week 4 Lecture: Instructional Design

Instructional Design

‘How to DO something or EXPLAIN how something works’. It is any growth of systems and specifications that aid to any theory that looks to ensure legible understanding of any instruction. A process of analysis that aids to deliver a system working towards any need. Challenges along the way can include limited screen area, limited resolution, control and that of redundant information. Areas that offer opportunity include time and the continuous development of layering.


Kinds of Interaction include

  • Instruction: navigating/way-finding via buttons
  • Conversation: Back and Forth dialogue
  • Manipulation: Drag and Drop Elements
  • Exploration: Playful, Game-like


Week 3 Lecture: Design Patterns for Screen

Different paradigms of design patters can be used for screens to contrast within the Desktop. There is some use with starting small and enlarging upon screen. i.e. iPhone screens – forcing us to prioritise choose and above all alter our mental structure before we can take on desktop screens for example.

Screen Shot 2017-05-07 at 8.48.08 pm.png


With reference to book A Pattern Language such designers display a series of photographs and drawings offering great insight into the exact methods for designing practical, safe and attractive outcomes for screens. With note that the following are to be considered:

  • Account registration
  • Long Scroll
  • Card Layouts
  • Hero Images
  • Animations
  • Galleries and slideshows
  • hovering
  • Material Design
  • Responsive Design

With consideration for what’s best for your user and not just need for an aesthetic.

Lecture 2: Process + Context

‘Context of use and Context for use’

Part 1. process an overview.

The process maps invention to presentation; it includes error, metaphor, scenario, task, representation and graphic manipulation. The process of which starts usually with earnest sketch, post-it note etc as we identify and frame the problem. Diagrams, models and flowcharts are all useful in this process of early visualisation in identifying and designing the next step.




Onward the drawing board we need to put our designs in use. Part of this process includes placing a prototype in the hands of the people who will be using said interface, i.e context. Creating Personas are an authentic way to establish context and often help understand what they are doing and how they work. Writing scenarios to better understand their situation. Ethnography, surveys all contribute to suitable content in context to the developments of what, how and where it’s being used.

Week 1 Lecture: What is Interactive Design?

What is Interactive Design and what does it ask of us?

Like the foundations Walt laid for the glitter that is now Walt Disney Enterprise so too does Interaction Design’s hardwiring enable the unicorns of the Interactive Design realm to reign open a meaningful display of hardware usage. It is an intelligent multi faceted interface so animatic its purpose provides a palpable experience between user and technology. It has the ability to retrieve and process information instantaneously.  Constantly changing in information and media Interactive Design asks us to focus on the capabilities and constraints of our cognitive process.

Interactive Design in Life

A field greatly influenced by the Fluxus movement Interactive Design plays on an anti-commercialism rather do-it-yourself aesthetic. Bill Verplank best explains its current presence in time.

‘as Interactive designers we need to answer three questions, about how people act, how they feel and how they understand‘. See his diagram below for a healthy digest.interaction-design-material-form-and-metaphor-14-728Verplank’s stimuli illustrates how as designers we can handle and push the world, a world of continuous control and navigate easier movement through the progression of the machine in time. The question ‘How do you feel’ is how we get feedback from the world to feed the machine. Effectively it allows us to distinguish between fuzzy or cool media and hot or distinct media. For example Verplank discerns early Tv as a cool medium with its fuzzy image. Cool media will always draw you in. It welcomes activity. How do we know? Well for example as we design interactions with computers in them we must communicate legible user interfaces so we know what they are going to do.

There for it is cumbersome of us to route a product overview in an needs to know what to do moment to moment basis.  As such these emergency user pathways build confidence and cultivate a greater the knowledge of expectation between a product and its user appropriate to the goals of the experience.

Bill Verplank Interview. Designing interaction, Chp 2: My PC Mit Press, Cambridge, 2007.



‘Designers of digital technology products no longer regard their job as designing a physical object—beautiful or utilitarian—but as designing our interactions with it.’


Blog at WordPress.com.

Up ↑