Please enable JavaScript.
Coggle requires JavaScript to display documents.
UI development (User interface elements (KISS principle (Simple and easy…
UI development
User interface elements
KISS principle
Simple and easy-to-use UI
Minimise user input
Preselect likely choices
Buttons
Checkboxes & radio buttons
Switches
Segmented controls
Stepper: increment/decrement a value
Slider
Popup menu
Pickers
TextView
EditText
Attributes: autoLink, autoText, password, phoneNumber
Images
Lists
Alert + dialogs
Collections
Scroll views
Navigation
Refresh
User interface concepts
Diagram 1
The action cycle:
Diagram 2
Actions are goal directed
What do we want to happen?
What is the desired state?
Human actions has two major aspects
Execution: what do we do?
Evaluation: compare if what happens is what we want to happen
7 stages of action:
Diagram 3
Gulf of execution
The difference between the intentions and the allocable actions
How directly can the actions be accomplished?
Do the actions that can be taken in the system match the actions intended by the person?
Diagram 4
Design aids:
visibility
provides a good conceptual model
good mappings
feedback
Gulf of evaluation
Reflects the amount of effort needed to interpret the state of the system
Is the information about the state of the system easily accessible?
Is it represented to ease matching with intentions?
Diagram 5
Design questions
Execution
Can the user tell what actions are possible?
Does the interface help with mapping from intention to physical action?
Does the device easily support required actions?
Evaluation
Can the user tell if the system is in the desired state?
Can the user map from the system state to an interpretation?
Can the user tell what state the system is in?
Challenges when designing for mobile devices
Computing power is not the limiting factor
Interface (and user experience) determines the size
Technical progress is fast - evolution isn't
Mobile devices and user input
Designing for cross-device usage
Different form factors
Screen size
Handling
Different capabilities
Battery life
Sensor availability
Accessibility
Ensure portability across devices
High level API
Use platform-independent parts of low-level API
Responsiveness: discover device capabilities
Web vs native
Server-based approach
Create a web servie
Client (the mobile device) accesses the content via a browser
Device-based (native) approach
Develop an application with an SDK
Deploy the application locally on the mobile device
Input on mobile devices
Keypad input
Keyboard input
Pen-based input
Voice input
Aspects of the user experience
Encompasses all aspects of the end-user's interaction with the company, its services and its products
Usability
Quality attribute that asseses how easy user interfaces are to use
Refers to methods for improving ease-of-use during the design process
5 quality components
Learnability: how easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency: once users have learned the design, how quickly can they perform tasks?
Memorability: when users return to the design after a period of not using it, how easily can they reestablish proficiency?
Errors
How many errors do users make?
How severe are these errors?
How easily can they recover from the errors
Satisfaction: how pleasant is it to use the design?
Heuristics
Meet expectations
Match the real world
Consistency + standards
Help & documentation
The user is the boss
User control & freedom
Visibility of system status
Flexibility & efficiency
Handle errors
Error prevention
Recognition, not recall
Error reporting, diagnosis and recovery
Keep it simple
Aesthetic & minimalist design