Ui design
•Download as PPTX, PDF•
2 likes•938 views
The document discusses principles of user interface design including Constantine and Lockwood's principles of structure, simplicity, visibility, feedback, and tolerance. It also discusses Ben Schneiderman's eight golden rules of interface design such as consistency, enabling shortcuts, providing feedback, and reducing memory load. Additional topics covered include Gestalt laws of grouping, Fitts' law, layout approaches, usability heuristics, and 20 principles of user interface design.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Ui design
Similar to Ui design (20)
Recently uploaded
Recently uploaded (20)
Ui design
- 2. “To design is much more than simply to assemble, to order, or even to edit: it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” Paul Rand
- 3. TOPICS UI DESIGN PRINCIPLES - Constantine & Lockwood The “EIGHT GOLDEN RULES” of Interface Design – Ben Schneiderman Gestalt Laws Of Grouping 10 Usability Heuristics For UI Design Layout
- 6. UI DESIGN PRINCIPLES - Constantine & Lockwood Structure Principle Simplicity Principle Visibility Principle Feedback Principle Tolerance Principle Reuse Principle
- 7. The “EIGHT GOLDEN RULES” of Interface Design – Ben Schneiderman Strive for CONSISTENCY. Enable frequent users to use SHORTCUTS. Offer informative FEEDBACK. Design dialogue to yield CLOSURE. Offer simple ERROR HANDLING. Permit easy REVERSAL OF ACTIONS. Support INTERNAL LOCUS OF CONTROL. Reduce short-term MEMORY LOAD.
- 9. #1 Consistency According to the principle of consistency, systems are more usable and learnable when similar parts are expressed in similar ways. Aesthetic Functional Internal External
- 10. #2 Shortcuts As the frequency of use increases, so the user’s desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations Function keys Hidden Commands Macros
- 11. #3 Feedback
- 12. #3 Feedback
- 13. #4 Design dialog to yield closure
- 14. #5 Error Handling Design the system so that the user cannot make a serious error. Error prevention over error correction. Automatic detection of errors Clear error notifications. Hints for solving the problem.
- 16. Animated 404 Pages http://hotdot.pro/en/404/ http://attackpattern.com/404
- 17. #6 Reversal Of Actions Relieves anxiety. Errors can be undone.
- 18. #7 Internal Locus Of Control The user needs to know that they are in charge of the system and that the system responds to their actions.
- 19. #8 Reduce Short Term Memory Load First impressions are remembered. Be consistent in displaying information. Use standard terminology. Offer a good online help or reference documentation. Design icons and names that can be recognizable for easy recall. Design wizard interface rather than series of commands.
- 20. GESTALT LAWS OF GROUPING Law of Proximity Law of Similarity Law of Closure Law of Symmetry Law of Common Fate Law of Continuity Law of Good Gestalt Law of Past Experience
- 21. 10 Usability Heuristics For UI Design 1. Visibility of system status. 2. Match between system and the real world. 3. User control and freedom. 4. Consistency and standards. 5. Error Prevention. 6. Recognition rather than recall. 7. Flexibility and efficiency of use. 8. Aesthetic and minimalist design. 9. Help users recognize, diagnose and recover from errors. 10. Help and documentation.
- 22. FITTS LAW The time required to move to a target is a function of the target size and distance to the target. Designers can decrease errors and improve usability by understanding the implications of Fitts’ Law.
- 23. Layout Static Liquid Adaptive Responsive
- 24. Awesome Tools For Designers http://colllor.com https://color.adobe.com/
- 25. Awesome Tools For Designers http://mobile.colorotate.org/ http://www.colourlovers.com/
- 26. Typography Readability Measure (Line length) Leading (Line Height) Tracking (Letter Spacing) Word Spacing Color
- 29. 20 UI Principles To Remember … 1. Clarity is job #1. 2. Interface exist to enable interaction. 3. Conserve attention at all costs. 4. Keep users in control. 5. Direct manipulation is best. 6. One primary action per screen. 7. Keep secondary actions secondary. 8. Provide a natural second step. 9. Appearance follows behavior. 10. Consistency matters.
- 30. 20 UI Principles To Remember ... 11. Strong visual hierarchies work best. 12. Smart organization reduces cognitive load. 13. Highlight, don’t determine with color. 14. Progressive disclosure. 15. Help people inline. 16. A crucial moment: the zero state. 17. Existing problems are most valuable. 18. Great design is invisible. 19. Build on other design principles. 20. Interfaces exist to be used.
Editor's Notes
- For every action, there should be some system feedback. For frequent and minor actions, the response can be modest. For infrequent and major actions, the response should be more substantial. Ex: System is waking up, press a button, copying files
- Grouping of actions Explicit completion of an action Well-defined options for the next step
- This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.
- Always let the user be able to cancel and quit from the task/system to give him the feeling of control.
- A famous study suggests that humans can store only 7 (plus or minus 2) pieces of information in their short term memory. You can reduce short term memory load by designing screens where options are clearly visible, or using pull-down menus and icons Short-term memory or working memory is a temporary store that can hold a small amount of information, such as a handful of words, numbers, or symbols, related to your current train of thought. Working memory decays very rapidly; the information can be lost when your attention is drawn to something else, and so you often have to repeat the information to yourself to avoid having it disappear. The capacity of working memory is said to be about “seven, plus or minus two” items (Miller, 1956), and it’s for this reason that North American phone numbers were chosen to be seven digits long — it’s difficult to hold more than about seven digits in your mind if you’ve heard a phone number and you’re trying to write it down.
- System updates user of time at the bottom right corner. The use of magnifiers icon for search boxes are easily interpreted to the user because it is mapped to the real world for looking up or searching something. The user should always be able to reach to the home page from any screen. Icons, labels, form items should be consistently used across the UI. Make sure to make required fields more prominent so that user does not have to click to know the field is required. Breadcrumb navigation Enable biometrics to make the user more efficient for task completion. Design for visual appeal and keep user engaged In the UI. Help users to complete the task they are doing even if they encounter errors by providing meaningful error messages. Help and documentation needs to be available to the user always.
- Designers can decrease errors and improve usability by understanding the implications of Fitts’ Law. The basic idea in Fitts's Law is that any time a person uses a mouse to move the mouse pointer, certain characteristics of objects on the screen make them easy or hard to click on. The farther the person has to move the mouse to get to an object, the more effort it will take to get to. The smaller the object is, the harder it will be to click on
- 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, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design?
- Clarity is job Clarity is the first and most important job of any interface. To be effective using an interface you've designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. While there is room for mystery and delayed gratification in interfaces, there is no room for confusion. Clarity inspires confidence and leads to further use. One hundred clear screens is preferable to a single cluttered one. Interfaces exist to enable interaction Interfaces exist to enable interaction between humans and our world. They can help clarify, illuminate, enable, show relationships, bring us together, pull us apart, manage our expectations, and give us access to services. The act of designing interfaces is not Art. Interfaces are not monuments unto themselves. Interfaces do a job and their effectiveness can be measured. They are not just utilitarian, however. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world. Conserve attention at all costs We live in a world of interruption. It's hard to read in peace anymore without something trying to distract us and direct our attention elsewhere. Attention is precious. Don't litter the side of your applications with distractible material…remember why the screen exists in the first place. If someone is reading let them finish reading before showing that advertisement (if you must). Honor attention and not only will your readers be happier, your results will be better. When use is the primary goal, attention becomes the prerequisite. Conserve it at all costs. Keep users in control Humans are most comfortable when they feel in control of themselves and their environment. Thoughtless software takes away that comfort by forcing people into unplanned interactions, confusing pathways, and surprising outcomes. Keep users in control by regularly surfacing system status, by describing causation (if you do this that will happen) and by giving insight into what to expect at every turn. Don't worry about stating the obvious…the obvious almost never is. Direct manipulation is best The best interface is none at all, when we are able to directly manipulate the physical objects in our world. Since this is not always possible, and objects are increasingly informational, we create interfaces to help us interact with them. It is easy to add more layers than necessary to an interface, creating overly-wrought buttons, chrome, graphics, options, preferences, windows, attachments, and other cruft so that we end up manipulating UI elements instead of what's important. Instead, strive for that original goal of direct manipulation…design an interface with as little a footprint as possible, recognizing as much as possible natural human gestures. Ideally, the interface is so slight that the user has a feeling of direct manipulation with the object of their focus. One primary action per screen Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary. Screens that support two or more primary actions become confusing quickly. Like a written article should have a single, strong thesis, every screen we design should support a single, strong action that is its raison d'etre. Keep secondary actions secondary Screens with a single primary action can have multiple secondary actions but they need to be kept secondary! The reason why your article exists isn't so that people can share it on Twitter…it exists for people to read and understand it. Keep secondary actions secondary by making them lighter weight visually or shown after the primary action has been achieved. Provide a natural next step Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface. Anticipate what the next interaction should be and design to support it. Just as we like in human conversation, provide an opening for further interaction. Don't leave a person hanging because they've done what you want them to do…give them a natural next step that helps them further achieve their goals. Appearance follows behavior Humans are most comfortable with things that behave the way we expect. Other people, animals, objects, software. When someone or something behaves consistently with our expectations we feel like we have a good relationship with it. To that end designed elements should look like how they behave. In practice this means that someone should be able to predict how an interface element will behave merely by looking at it. If it looks like a button it should act like a button. Don't get cute with the basics of interaction…keep your creativity for higher order concerns. Consistency matters Following on the previous principle, screen elements should not appear consistent with each other unless they behave consistently with each other. Elements that behave the same should look the same. But it is just as important for unlike elements to appear unlike (be inconsistent) as it is for like elements to appear consistent. In an effort to be consistent novice designers often obscure important differences by using the same visual treatment (often to re-use code) when different visual treatment is appropriate.
- Strong visual hierarchies work bestA strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. That is, when users view the same items in the same order every time. Weak visual hierarchies give little clue about where to rest one's gaze and end up feeling cluttered and confusing. In environments of great change it is hard to maintain a strong visual hierarchy because visual weight is relative: when everything is bold, nothing is bold. Should a single visually heavy element be added to a screen, the designer may need to reset the visual weight of all elements to once again achieve a strong hierarchy. Most people don't notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design. Smart organization reduces cognitive load As John Maeda says in his book Simplicity, smart organization of screen elements can make the many appear as the few. This helps people understand your interface easier and more quickly, as you've illustrated the inherent relationships of content in your design. Group together like elements, show natural relationships by placement and orientation. By smartly organizing your content you make it less of a cognitive load on the user…who doesn't have to think about how elements are related because you've done it for them. Don't force the user to figure things out…show them by designing those relationships into your screens. Highlight, don't determine, with color The color of physical things changes as light changes. In the full light of day we see a very different tree than one outlined against a sunset. As in the physical world, where color is a many-shaded thing, color should not determine much in an interface. It can help, be used for highlighting, be used to guide attention, but should not be the only differentiator of things. For long-reading or extended screen hours, use light or muted background colors, saving brighter hues for your accent colors. Of course there is a time for vibrant background colors as well, just be sure that it is appropriate for your audience. Progressive disclosure Show only what is necessary on each screen. If people are making a choice, show enough information to allow them the choice, then dive into details on a subsequent screen. Avoid the tendency to over-explain or show everything all at once. When possible, defer decisions to subsequent screens by progressively disclosing information as necessary. This will keep your interactions more clear. Help people inline In ideal interfaces, help is not necessary because the interface is learnable and usable. The step below this, reality, is one in which help is inline and contextual, available only when and where it is needed, hidden from view at all other times. Asking people to go to help and find an answer to their question puts the onus on them to know what they need. Instead build in help where it is needed…just make sure that it is out of the way of people who already know how to use your interface. A crucial moment: the zero state The first time experience with an interface is crucial, yet often overlooked by designers. In order to best help our users get up to speed with our designs, it is best to design for the zero state, the state in which nothing has yet occurred. This state shouldn't be a blank canvas…it should provide direction and guidance for getting up to speed. Much of the friction of interaction is in that initial context…once people understand the rules they have a much higher likelihood of success. Existing problems are most valuable People seek out solutions to problems they already have, not potential problems or problems of the future. Therefore, resist creating interfaces for hypothetical problems, observe existing behavior and design to solve existing problems. This isn't as exciting as blue sky wondering but can be much more rewarding as people will actually use your interface. Great design is invisible A curious property of great design is that it usually goes unnoticed by the people who use it. One reason for this is that if the design is successful the user can focus on their own goals and not the interface…when they complete their goal they are satisfied and do not need to reflect on the situation. As a designer this can be tough…as we receive less adulation when our designs are good. But great designers are content with a well-used design…and know that happy users are often silent. Build on other design disciplines Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design. They can be touched upon or specialized in. Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on. Pull in insights from seemingly unrelated disciplines as well…what can we learn from publishing, writing code, bookbinding, skateboarding, firefighting, karate? Interfaces exist to be used As in most design disciplines, interface design is successful when people are using what you've designed. Like a beautiful chair that is uncomfortable to sit in, design has failed when people choose not to use it. Therefore, interface design can be as much about creating an environment for use as it is creating an artifact worth using. It is not enough for an interface to satisfy the ego of its designer: it must be used!