What is responsive Web Design?
Responsive web design is an approach to web design and development whereby websites and web applications respond to a screen size of the device on which they’re being accessed.
The response includes layout changes, rearrangement of content, and in some cases selective display or hiding of content elements.
Using a responsive web design approach, you can optimize web pages to achieve great user experience on a range of devices, from smartphones to desktop.
What is Progressive Enhancement?
Scaling down websites according to the current device, selectively removing/adding functionality according to the device’s characteristics
What is Responsive Design?
Designers show content based on the browser space available. This allows consistency between what a site shows on a desktop and what it shows on a handheld device. Responsive design is the “traditional” option and remains the more popular approach to date.
Responsive Design - Pros
— Uniform & seamless = good UX.
— Abundance of templates to use.
— SEO friendly.
— Often easier to implement
Responsive Design - Cons
— Less screen size design control.
— Elements can move around
— Advertisements lost on screen.
— Longer mobile download times.
Principles for Responsive Design
- Fluid Grid Systems
- Fluid Image Use
- Media Queries
Responsive Design - Fluid Grid Systems
Absolute size won’t work.
Let’s see an example:
Developing for a maximum of 960 pixels but it is going to be displayed in 1280
- Target size/ context = relative size
- 960/1280 = 75%
Two column approach to your layout. The columns are intended to be of equal size with a margin of 20 pixels between them (making each column 470 pixels wide). We use the same formula again for the columns and the margin:
- 470/960 = 48.9% (for each column)
- 20/960 = 2.2% (for the margin)
Responsive Design - Fluid Images
The easiest way to handle fluid images (images that scale to fit their container) is using the CSS command:
* img { max-width: 100%;}
Heuristic Guide for Mobile Design
- Mobile interactions must be user-driven
- Mobile requires ease of use
- Avoid disruptions
- Mobile users are in constant contact with their devices
- Mobile users aim at continuous experiences beyond the device
- Mobile interactions may be part of a complex task
- Mobile users will trust peer-to-peer marketing the most
- Mobile users expect GPS to enhance their experiences
- Mobile may lead to a “dumb terminal” with further processing carried out elsewhere
What is Social Proof?
Social proof is based on the idea of normative social influence, which states that people will conform in order to be liked by, similar to, or accepted by the influencer (or society).
In short, social proof demonstrates that we are likely to converge on a course of action when others provide that action for us.
Why Social Proof in UX?
To deliver credibility:
If other people find a source useful or
credible – we are more likely to believe that source may be useful or credible for ourselves.
To promote adoption and/or acceptance:
Volumes of people subscribing to a Facebook page or Twitter feed can encourage others to do the same.
Think about Booking.
Level 1: 20 visitors stayed here.
Level 2: 3 visitors from UK stayed here.
Level 3: 3 visitors and 1 friend stayed here.
Advantages of a Mobile UX
- It is possible to provide specific needs at a specific time and place
- Can be accessed in almost anywhere
- Mobile development can be more cost effective
- More potential users (almost everyone has a smartphone)
- There is the opportunity to reach a much wider geographic area (in developing nations smartphones are often the only way for a user to access the internet).
User-Centered Mobile Design: Phases
- Analysis
- Design
- Evaluation
- Implementation
User-Centered Mobile Design: Phase 1. Analysis
Determine the goal of the product and the target audience. Look at the competitors, to support or disrupt.
User-Centered Mobile Design: Phase 2. Design
Based on the Analysis phase, should respond to the requirements gathered. Some mood boards and wireframes can be created.
User-Centered Mobile Design: Phase 3. Evaluation
Several methods can be applied: think aloud, eye tracking, observation, survey, etc.
User-Centered Mobile Design: Phase 4. Implementation
Finalise the highfidelity prototype until the product.
Content is King
- If content is king, then design needs to be carried out with delivering that content in mind.
- Develop key content before you begin design work.
Functions for Mobile
- Keep the user in the picture. Inform the user about what to expect
- Pay attention to the detail. Aim at a seamless experiences to achieve a successful product.
- Watch the interface. Users are all thumbs, literally, on smartphones. Can your tasks be easily completed with someone’s thumbs? No? Then rethink them.
- Keep things intuitive. This is back to the thumbs issue really – keep buttons, tabs, boxes, etc. to a minimum and keep content easy to access and navigate.
- Keep controls consistent and at the bottom. This lets the user focus on the content and manipulate it as they need to.
- Reduce user input where necessary. Pay attention to whether auto-correct is a help or hindrance on the device for your tasks. Make sure that you help the user pick the right keyboard to get the job done. Don’t forget to support a landscape orientation – particularly if you want a lot of typing done. Think about providing an orientation lock to make this easy.
Navigation for Mobile
- None at all. If you can deliver all information in one screen.
- Simple tabs. Break content consistently in several areas
- Drill down menus. If content is complex, then group in categories and organize it in categories.
Feedback (Mobile)
- Have a method to deliver feedback. From the tactile (think the vibration function) to the visual (progress bars) – you need to keep users aware as to whether things are going well as they execute their task.
- Ask for confirmation when necessary. Modal boxes are annoying, but the exception is when you want to protect the user. If you’re asking if someone wants to delete a photo, for example, you can ask if they’re sure before you carry out the action.
Continuous (Mobile)
If the user was performing a task but was interrupted, when back to the app it should continue where it was.
First time of Use (Mobile)
- Keep things simple and focus very much on key tasks when your app first launches. You can add complexity over time.
- If it’s confusing or hard to carry out a task the first time that your app is used – it’s likely that it will never be used again.
Qualitative User Research - Methods for Mobile Apps
- Lab Studies
- Journal/Diary Studies
- Observational/Field Studies
-
What is UX?18
-
User Research: Methods and Best Practices44
-
User Research - Designing a Questionnaire59
-
Design Thinking35
-
User Research - Personas13
-
Mobile User Experience44
-
Storytelling36
-
AI and UX9
-
Design Thinking Complete Process10
-
Introduction to Data Visualization26
-
Visual Storytelling and Decision Support8
-
Business Intelligence and Analytics19
-
Dashboard Design8
