From requirements to design Conceptual design Text p 48 Text p 73

Preece, Rogers & Sharp Conceptual design Physical design Understand & analyse the problem space Using a range of frameworks, theories etc, formulate the conceptual model; Interface metaphors Interaction types Alternative design insights Expand the conceptual model Product functions Product function relationships Available information Physical design Using scenarios Using prototypes Card based Prototyping physical design Lets unpack this process in more detail

Understanding the problem space What do you want to create? What are your assumptions? Will it achieve what you hope it will?

A framework for analysing the problem space When designing for a new user experience how will the proposed design extend or change current ways of doing things? support people in their activities Will it really help them? Are there problems with an existing product or user experience? Why do you think there are problems? How you think your proposed ideas might be useful?

An example What were the assumptions made by cell phone companies when developing WAP services? Was it a solution looking for a problem?

Assumptions: realistic or wish-list? People want to be kept informed of up-to-date news wherever they are - reasonable People want to interact with information on the move – reasonable People are happy using a very small display and using an extremely restricted interface - not reasonable People will be happy doing things on a cell phone that they normally do on their PCs (e.g. surf the web, read email, shop, bet, play video games) - reasonable only for a very select bunch of users

From problem space to design space Having a good understanding of the problem space can help inform the design space e.g. what kind of interface, behavior, functionality to provide But before deciding upon these it is important to develop a conceptual model Design space Problem space conceptual model

Conceptual model Need to first think about how the system will appear to users (i.e. how they will understand it) A conceptual model is a high level description of: “the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”

formulating a conceptual model What will the users be doing when carrying out their tasks? How will the system support these? What kind of interface metaphor, if any, will be appropriate? What kinds of interaction modes and styles to use? Always keep in mind when making design decisions how the user will understand the underlying conceptual model

An example What do you think were the main assumptions made by developers of online photo sharing and management applications, like Flickr?

Assumptions and claims Able to capitalize on the hugely successful phenomenon of blogging Just as people like to blog so will they want to share with the rest of the world their photo collections and get comments back People like to share their photos with the rest of the world A claim From Flickr’s website (2005): “is almost certainly the best online photo management and sharing application in the world”

Guiding principles Keep an open mind – never forget the users and their context Discuss ideas with other stakeholders Use low-fidelity prototypes for rapid feedback Iterate, iterate,iterate

Conceptual models Transform user requirements/needs into a conceptual model Conceptual model: “a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended” Don’t move to a solution too quickly. Iterate, iterate, iterate Consider alternatives: prototyping helps

Initial conceptual design: Which interface metaphors would be suitable to help users understand the product? Which interaction types would best support the users’ activities? Do different interface types suggest alternative design insights or options? There is no one way of developing the initial design – it is always contextual.

Interface metaphors? Interface metaphors combine familiar knowledge with new knowledge in a way that will help the user understand the product. Erickson - Three steps for choosing a good metaphor: understand functionality – what will the system do, identify potential problem areas; what parts of the system are likely to most problematic for your users (choose a metaphor to support this) generate metaphors – look in the users descriptions of tasks for ideas look at current metaphors being used

Interface metaphors? Evaluate metaphors: How much structure does it provide? A good metaphor will require structure and preferably familiar structure. How much is relevant to the problem? Users can sometimes underestimate how much of a metaphor they understand. Is it easy to represent? A good metaphor will be associated with particular visual and audio elements as well as words. Will the audience understand it? How extensible is it? Does it have extra aspects that my be useful later on?

Another way of thinking about conceptual models Process vs product oriented Products or process must be clearly identified A set of presentation rules must be designed Design a set of rules for how windows will be used Identify how major information and functionality will be divided across displays Define and design major navigational pathways Document alternative conceptual design models in sketches and explanatory notes

Consider interaction types Which interaction type? How the user invokes actions Instructing, conversing, manipulating or exploring Depend on application domain and product being developed Most conceptual models will include a combination of interaction types – different parts of an interaction will need different types

Consider interface types To help think outside the box consider: Do different interface types provide insight? WIMP, shareable, mobile, etc Its important not to be unduly influenced by a predetermined interface type. Consider all types – no matter how bizarre.

Expanding the conceptual model What functions will the product perform? What will the product do and what will the human do (task allocation)? How are the functions related to each other? Sequential or parallel? Categorisations, e.g. all actions related to telephone memory storage What information needs to be available? What data is required to perform the task? How is this data to be transformed by the system?

Using scenarios in conceptual design Express proposed or imagined situations Used throughout design in various ways scripts for user evaluation of prototypes concrete examples of tasks as a means of co-operation across professional boundaries Plus and minus scenarios to explore extreme cases

Generate storyboard from scenario

Generate card-based prototype from use case

Summary Conceptual design (the first step of design) Consider interaction types and interface types to prompt creativity Storyboards can be generated from scenarios Card-based prototypes can be generated from use cases Text p 48 Text p 73