Tuesday, 24 October 2017

Interactive Design - Andy Pratt & Jason Nunes

- Screens are all around us, at some point in your design career, there is a good chance that what you design will extend into the interactive digital world in some form.
- UCD, user centred design means designing for individuals. 
- Following a user centred process with a focus on understanding and meeting the needs of real people leads to more successful design. 
- Designing for real people, understanding who they are, what they want, where they live, where they work and meeting their unmet needs leads to better design. 
"19th century culture was defined by the novel, 20th century by the cinema, the culture of the 21st century will be defined by the interface" - Lev Manovich
- Puts the user of a product at the centre of the design process. 
- Difficult for designers to see how users will perceive understand and use their designs. 
- Other factors include, business goals, budget, timeline and limitations of technology.
- Need to understand what they are communicating, how that design will be realised and who the design is intended for.
- Users become your co-designers because you can't imagine all the ways someone will actually use what you create.
- Mental model, how a user expects the product to work and be used, conceptual model how it actually works, designers try to match a user's mental model in order to ensure it works the way the user expects it to. (100 things every designer needs to know, Susan Weinschenk).
- A UX designer will work closely with, technical architects, visual designers, content strategists, project managers. 
- A designer and developer sketch, design and build up the final product together.  A developer can help determine when it makes sense to start building and stop sketching. 
- Who do they see as their primary and secondary users?
- Functionality, what the design will do, features, how it will do it. 
- Suggested features, project goals and user needs, reduced set of features and functionality. 
- Post it notes, what the app needs to do, personalities, most important goals and features. 
- Getting to know users, who will use it, where will it be used. 
- Personas, list of descriptors, where they work, interests, goals and needs, what they want, what their frustrations are. Acts as a reminder that whenever a decision is made it should take into account the needs and wants of the people for whom the team is designing.
- "A good persona should be used throughout the life span of a project, reference your persona in the wireframes and designs and talk about them in meetings and presentations, give life to your personas and you'll end up designing great experience for the people they represent"- Dan Willig
- User Scenarios, communicating what you've learned, use cases. 
- Accessibility, how usable and accessible a website is to as broad a rage of people as possible. 
- Know your competitors, things they aren't doing that you can do, 'white space'.
- Content, how often it will be updated, where it will come from and how it will be created. Analyse and  plan. create, gather and revise, refine, maintain and revise. 
'Design in the absence of content is not design it's decoration' - Jeffry Zeldman
- Designing for the right device, pushing the limits of your device.  How big the screen is, how much information can be presented and still be readable. Designers are often asked to design a website first and then translate in into simplified form for the mobile web. 
- Guide, motivate and engage the reader. Users need to understand where they are in the application, where they've come from, where they can go and how to get back to where they started. 
- Design for user's needs, not their wants. 
- Gamification, may use levels, rewards, points for completing tasks. 
- Sitemaps, wireframes and prototypes, sketches first, interaction models low fidelity prototypes, high fidelity on photoshop. allow designers to test out ideas quickly in a real context form. 
- Wireframes are blueprints of every page of the site. 
- Functional specifications, what is intended to happen when a user interacts with the page. 
- After all of this you can brand the experience, do the visual design. (Cartoon Network App)
- Brand values and personalities, functionality.
- Usability testing, usability test plan.  

Brief

Research - Existing Apps

User Research - Parents and Children

Kids like challenges and conflict, whereas adults like to just accomplish tasks with no challenges or anything getting in the way. 
Conflict play help children to:
Predict how others react to their behaviour
Controlling emotions
Communicating clearly
Seeing other pints of view
Resolving disagreements

Kids love visual and auditory feedback, every interaction needs to produce some sort of response or reaction. 
Adults like feedback when they do something successful or wrong. Adults get annoyed when every click results in a sound or animation. 
Kids like to be rewarded for everything they do.
Build safeguards understanding trust issues to protect young users. 
Designing levels, to hard to design for a broad age range, therefore levels can help different age groups access different content and activities. 
Adults are generally pretty consistent. 

Similarities when designing for kid and adults;
Consistency, design patterns are consistent, no spontaneous animations or sounds which don’t contribute to the overall goal. 
Not everything on the screen needs to move. 
Keep interactions and feedback consistent. 
Purpose, need to be immediately engaged in the goals and purpose of the app, they need to know what is in it for them before they’re willing to fully engage. 
Need to communicate clearly what the app is and how it works quickly. 
“lagniappe”, an ‘easter egg’, small unexpected interactions that enhance their experience with a site or app. 
Make a conscious effort to understand where your users are cognitively, physically and emotionally and make sure that your designs map to them appropriately. 

Coalmarch

Forces you to think about distilling the web experience to its basics. High degrees of interactivity and feedback.
Still need to deploy the same design approaches to kid’s design so that parents feel confident that you ‘get it’. 
Content - Geared towards kids and families. Engaging and informative enough for the adults to make informed decisions but at the same time simple enough for the child to understand. 
Bold bright colours and lots of images, keep the text to a minimum. 
High degree of interactivity and feedback.
Simple organisation and layout. 
Make name and branding extremely clear, clearly defined and hard to miss navigation. 
New fun and engaging ways to present information. 

Intuitive gestures for children such as tapping. 
Navigation and menu icons should always convey as literally as possible, whereas adults can understand more abstract icons. 
A clear indication of how to get back home. 
Nick Jr Games.
Children primarily go online for entertainment. 
Apple’s kids category in the apps. 

Designers aren’t kids, observing child’s play with toys, learning how children interact, what captures their attention and what bores them. 
Affordances, Design interactive elements that indicates they are interactive and tappable., for example buttons could have backgrounds, outlines or drop shadow. Items should wiggle/sparkle or draw attention to the user somehow. 

Menus needs to be simple and outright explicit. Don’t just rely on words, just try to use icons and little text. 

Feedback, context and sound - Adults want feedback when things go wrong kids want feedback wherever anything happens. Feedback in the form of pages changing, items moving or sounds. Feedback is especially important in educational apps. If they get something wrong, explain and give them another chance. Use these moments as teaching opportunities. Provide contextual feedback and display hints showing users how to succeed using no text. 

Context - Where will children be using the app, at home, at school, or somewhere in between, if your app is used at school , need multiple users at multiple levels. User profiles, avatars, saving progress.
Sound can be used but most apps should be just as usable without. 

What role to adults play in the app, maybe they are a separate type of user all together, may need to log in to a separate section, to check progress. 

Final Idea


An interactive app which both parents and children can use to help learn, develop and engage with cursive handwriting, which has now become a mandatory part of the school curriculum for all ages. 

What is User Experience Design?

Google Design and Apple, have open source about their design and their philosophies. 
IOS Human interface guidelines, design themes. 
Suggestions to app developers.
Grids, different areas of the screen.
Referencing and considering their ideas. 
Material Design which is associated with google apps. 
design.google
What, when , where, why and how, who.
Everything that affects the user's experience with the product.
Constantly questioning, the answers to these questions that shape the design.
The audience and business needs. 
Business needs and user needs overlap. 
User centred design process, takes the user's need into account into every stage of the product lifecycle. 
- Doing some of this stuff already.
- User centred design is a process, applying it to humans and their behaviour, very scientific. 
- It's not rocket science.
- Fascinating, rewarding, challenging. 
The design behind the visuals, visual design is just one small part of it. 
Asking a tonne of questions and going through a scientific process to create the visuals.
UX Mastery.com
Brief, audience, hierarchy, mandatory requirements. 
Human Computer Interaction
Usability
Need audience in mind, those people set the criteria by which you create effective visual communications. 
Completely embedded within our day to day activities, socially enhancing.
Do Goals and Be Goals. 
Hassenzahl and Roto
User Experience - Ways in which the user/customer experiences using the product on their own terms. 
User Experience Design - Informed manipulation and development of the factors that influence to user's experience. 
Proceeds any kind of visual design. 
It informs visual interface design. 

Analyse - Business research, user research, data analysis and conceptualisation. 
Design - Creating concepts, interaction behaviours, look and feel.
Prototypes - realising design alternatives
Evaluate- verifying and refining. Whatever solution is supported by criteria set out within user research.
Iterate - Getting it the best it possibly can be. 

User Research - Focus groups, interviews, observations, identifying and conceptualising user roles, user needs, task flows, etc. Numerical ,statistical, qualitative, analysing data. Looking at different ways of researching, user based research.

Personas - Characteristics of archetypal users. Can't please every single one, need to generalise. Reflecting on data found in user research, focus on the present, their current thinking and current state of mind, be realistic not idealistic, describe a challenging target user, provide insight to the users' context, behaviours, attitudes, needs, challenges, goals and motivations, social life, attitudes, needs, paying points, ease of use, in depth, be exhaustive as possible.  

Task Flows/User Flows - Flow chart methods, visualise the stages involved in completing certain tasks within the app, or the journey a user takes through the system. Identifying specific issues within the format. Look at series of events, reducing stages.

Wireframes - First step to putting all the user research, personas, workflows etc, into a visual format. Thinking about layout, testing hierarchies. Placeholder images and text. 

Should aim to use all of the techniques discussed here, can begin to consider user flows and develop specific personas. 




Concepts

Idea 1

An interactive app which both parents and children can use to help learn, develop and engage with cursive handwriting, which has now become a mandatory part of the school curriculum for all ages. 


Problem:
Parents and children need to now learn cursive handwriting as part of the curriculum.
Parents are confused and have to attend workshops in schools.
Parents find it hard to practise with children.
Children aren't engaged with it.
harder to get younger children to interact and practice handwriting. 
Children spend lots of times on technology and games, therefore they are more likely to go on an app and practice then sit down with a piece of paper. 

Problems to solve:
Help parents to understand without having to attend workshops in school.
Children can practise at home.
Easy to use.
Engaging so children don't get bored.
Make it more into a game therefore it doesn't feel like school, but they are still learning.
Easy for parents to understand how to help their children.
Free app to download.
Could also be used in school time for children to practise on as well as at home. 
Gender neutral.
Overcome government regulations.
Children as young as reception so from the ages of 5-11.
App to help parents and children learn about and practice cursive handwriting and phonics.
Instead of workshops in school.
It will be interactive, engaging and educational.
It needs to be easy to navigate and use for both parents and children.
It has to be of interest and attract parents and children.
To be used on an ipad/phone therefore the letters can be practised and written on the screen.
Colours need to be neutral.
Needs to be fun and entertaining as well as educational.
Different levels/stages for different age groups.
Needs to be informative.
Approchable.
Friendly.
Simple to use. 
Parents to teach their children from it.
Section for children then a section for parents.
Using the cursive handwriting font. 
Ease of use.
Different stages/levels. 
Different year groups can use it. 
Letters are in sentences rather than just letters. 
About, Phonics, learning, teaching, handwriting, practice.
Print outs.
Practise pages to print out.
Note pages. 
Advertise it for schools.
Icons - Home page, parents, children, practice/game, about, phonics/sound. 
Open app children/parent section login.
Children's section can have an interactive character.
Levels, how good you've done.
Parents section neutral, children's colourful.
Could come with a special pen to use on the screen.
Sans serif fonts.
Modern design. 


Idea 2

Problem:
Children spend too much time inside watching tv, playing computer games.
Lost their sense of adventure and imagination. 
Pokemon go has now been phased out, time for a new app to come along to encourage children to go outside.


App to make children explore and go outside more.
Interactive.
Finding objects.
Treasure hunts.
Making things with nature.
Games to play.
Relates to forest schools. 
Different places to go, stream, forest, park etc.
What different animals/objects can be found in each place.
Games to play int these areas.
How to interact with nature, creating teepees, nests etc.
Natural colours, greens/browns.
Similar to Pokemon go treasure hunt exploring to find characters/objects.

For older children ages from around 7-12


Idea 3

Problem:
Dog owners need to know areas where they are allowed to take their dogs, be that in cafes, on holiday, hotels, or walks.
Need to know where dogs are allowed off leads.
Which places to eat are dog friendly
Makes going on holiday and going out places easier, allowing to prepare and organise in advance. 

Different sections.
Cafes, Walks, Hotels, Holiday Homes, Restaurants. 

Colours, greens and reds.