sketching the User Interfaces.ppptx irst

sketching the User Interfaces.pptx irst

1. Understand the basic concept of building a low fidelity prototype. Lab#1 I.Huda Banuqitah

2. What a prototype is In its basic form, a prototype is an expression of design intent. Prototyping allows designers to present their designs and see them in action. In the context of digital products, a prototype is a simulation of the final interaction between the user and the interface. Depending on what a product team needs a prototype to do, it can simulate an entire app or just a single interaction I.Huda Banuqitah

3. prototype A lot of people confuse prototypes with sketches, wireframes, and mockups. The idea of simulation (read, “interactivity”) is essential for prototypes. I.Huda Banuqitah

4. Why we need prototypes The primary goal of building a prototype is to test designs before creating real products. Your product’s success is directly related to whether you test it or not. Without any doubt, your design will be tested when the product becomes available on the market and people begin using it. If this is the first-ever testing, there’s a high likelihood of negative feedback from users. Therefore, it’s always better to collect feedback during the low-risk research phase, and before public release. I.Huda Banuqitah

5. Cases that require a prototype Ensure the design concept works as intended .  In most cases, it’s relatively easy to test a concept with real users. Once an interactive version of a product idea is in the hands of real users, a product team will be able to see how a target audience wants to use the product. Based on this feedback, it’s possible to adjust an initial concept.+ Determine if people are able use a product . Prototyping is essential for finding and resolving usability issues before launch. Testing reveals areas that need improvement. That’s why so many product teams create prototypes, have users test them, and iterate the design until it’s good enough. I.Huda Banuqitah

6. What is fidelity? Fidelity means the detailing and the functionality of a prototype. Prototypes don’t necessarily look like final products , they can have different fidelity. The fidelity of a prototype refers to how it conveys the look-and-feel of the final product (basically, its level of detail and realism). Fidelity can vary in the areas of: Visual design+ Content+ Interactivity I.Huda Banuqitah

7. Types of prototypes There are many types of prototypes, ranging anywhere between these two extremes: Low-Fidelity If a prototype is low in detailing and low in functionality. High-Fidelity+ If a prototype is high in detailing and high in functionality. I.Huda Banuqitah

8. Low-fidelity prototyping Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. The first and most important role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product. They are best during the early stages . They help to make change very quickly with little effort. Here are the basic characteristics of low-fidelity prototyping : Visual design :  Only some of the visual attributes of the final product are presented (such as shapes of elements, basic visual hierarchy, etc.).+ Content : Only key elements of the content are included.+ Interactivity : The prototype can be simulated by a real human .  During a testing session, a particular person who is familiar with design acts as a computer and manually hangs the design’s state in real-time. Interactivity can also be created from wireframes, also known as “connected wireframes.” This type of prototype is basically wireframes linked to each other. I.Huda Banuqitah

9. Low-fidelity prototyping Pros Inexpensive .  The clear advantage of low-fidelity prototyping is its extremely low cost.+ Fast .  It’s possible to create a lo-fi paper prototype in just five to ten minutes. This allows product teams to explore different ideas without too much effort.+ Collaborative .  This type of prototyping stimulates group work. Since lo-fi prototyping doesn’t require special skills, more people can be involved in the design process. Even non-designers can play an active part in the idea-formulation process.+ Clarifying.  Both team members and stakeholders will have a much clearer expectation about an upcoming project. Cons Uncertainty during testing . With a lo-fi prototype, it might be unclear to test participants what is supposed to work and what isn’t. A low-fidelity prototype requires a lot of imagination from the user, limiting the outcome of user testing. Limited interactivity .  It’s impossible to convey complex animations or transitions using this type of prototype. I.Huda Banuqitah

10. Popular techniques Paper prototyping and clickable wireframes are two popular low-fidelity prototyping techniques. Both techniques are focused on providing the fastest-possible way to iterate design ideas until both the project team and the stakeholders are happy with the basics. Paper prototyping Paper prototyping allows you to prototype a digital product interface without using digital software . The technique is based on creating hand drawings of different screens that represent user interfaces of a product . While this is a relatively simple technique, it can be useful when a product team needs to explore different ideas and refine designs quickly . This is especially true in the early stages of design when the team is trying different approaches. I.Huda Banuqitah

11. Benefits of using Paper prototyping Leverage common design skills.  Everyone can sketch (even those who say they can’t) and this means that everyone can build paper prototypes. Allow early testing.  Testing prototypes early lets product teams find big-picture problems ,such as unclear information architecture ,  before they become too difficult to handle.+ Support rapid experimentation .  Different user interface elements can be drawn, cut out, copied to make extras, and then assembled on a new piece of paper. With paper prototypes, it’s also possible to mimic complex interactions, such as scrolling. I.Huda Banuqitah

12. Benefits of using Paper prototyping Serve as documentation . Unlike digital prototypes, paper prototypes can be used as a reference for future iterations. Notes and revisions can be written either directly on the prototype or on sticky notes attached to the pages. Facilitate adjustments.  Using paper prototypes, it’s possible to make changes during the testing session. If designers need to add a change to the prototype they can quickly sketch a response or erase part of the design. I.Huda Banuqitah

13. Clickable wireframes A  wireframe  is a visual representation of a product page that the designer can use to arrange page elements. Wireframes can be used as a foundation for lo-fi prototypes. Clickable wireframes are the simplest form of interactive prototype — created by linking static wireframes together. Just like paper prototypes, clickable wireframes often don’t look like the finished product, but they do have one significant advantage over paper prototypes — they don’t require a separate person to work as a facilitator during the testing session. I.Huda Banuqitah

14. Clickable wireframes I.Huda Banuqitah

15. Benefits of using wireframes Existing design deliverables can be reused . During a particular phase of the design process you’ll have wireframes or sketches that represent your product’s UI design. In most cases, it’s possible to use them to create a clickable flow.+ Layouts can be easily changed .  Designers can easily adapt wireframes based on user feedback and repeat the testing process. With the right tool, it’s easy to create or modify click-through prototypes without spending a lot of extra time.+ Low-fidelity prototypes can be created using tools for presentation (such as PowerPoint or Keynote).They can also be created using tools made specifically for prototyping. Using such tools has one crucial advantage: you can move from a low-fidelity to a high-fidelity prototype without switching the prototyping tool. I.Huda Banuqitah

16. Phases of making a product prototype Low fidelity Medium -high fidelity I.Huda Banuqitah

17. Sketches I.Huda Banuqitah

18. Storyboards (made out of hand sketches) I.Huda Banuqitah

19. A wireframe is a low fidelity representation of a design Wireframe should clearly show: - the main groups of content (what?) - the structure of information (where?) - a description and basic visualization of the user – interface interaction (how?) Wireframes I.Huda Banuqitah

20. Mockup look and feel build on the wireframe with color, graphics and polish may adjust layout slightly but stays within the general guide of the wireframe. Wireframe Mockup I.Huda Banuqitah

21. Wireframes VS Mockup VS Prototype I.Huda Banuqitah

22. Wireframes VS Mockup VS Prototype I.Huda Banuqitah

23. The Eight Golden Rules of Interface Design 1. Strive for consistency. Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent color, layout, capitalization, fonts, and so on, should be employed throughout. Exceptions, such as required confirmation of the delete command or no echoing of passwords, should be comprehensible and limited in number 2 I.Huda Banuqitah

24. The Eight Golden Rules of Interface Design 2. Seek universal usability. Recognize the needs of diverse users and design for plasticity, facilitating transformation of content. Novice to expert differences, age ranges, disabilities, international variations, and technological diversity each enrich the spectrum of requirements that guides design. Adding features for novices, such as explanations, and features for experts, such as shortcuts and faster pacing, enriches the interface design and improves perceived quality. I.Huda Banuqitah

25. The Eight Golden Rules of Interface Design 3. Offer informative feedback. For every user action, there should be an interface feedback. For frequent and minor actions, the response can be modest, whereas for infrequent and major actions, the response should be more substantial. Visual presentation of the objects of interest provides a convenient environment for showing changes explicitly . I.Huda Banuqitah

26. The Eight Golden Rules of Interface Design 4. Design dialogs to yield closure. Sequences of actions should be organized into groups with a beginning, middle, and end. Informative feedback at the completion of a group of actions gives users the satisfaction of accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and an indicator to prepare for the next group of actions. For example let us take an eCommerce website as an example. If you notice every action that the user does, it gives them a feedback until finally the process is completed. The user is notified with a message that goes something like this: "Thank you for purchasing with us." I.Huda Banuqitah

27. The Eight Golden Rules of Interface Design 5. Prevent errors. As much as possible, design the interface so that users cannot make serious errors; for example, gray out menu items that are not appropriate and do not allow alphabetic characters in numeric entry fields (Section 3.3.5). If users make an error, the interface should offer simple, constructive, and specific instructions for recovery. For example, users should not have to retype an entire name-address form if they enter an invalid zip code but rather should be guided to repair only the faulty part. Erroneous actions should leave the interface state unchanged, or the interface should give instructions about restoring the state. I.Huda Banuqitah

28. The Eight Golden Rules of Interface Design 6. Permit easy reversal of actions. As much as possible, actions should be reversible. This feature relieves anxiety, since users know that errors can be undone, and encourages exploration of unfamiliar options Examples of reversible actions are data entry tasks, the complete group of actions like entering the name and address block, etc. I.Huda Banuqitah

29. The Eight Golden Rules of Interface Design 7. Keep users in control. Experienced users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions. They don’t want surprises or changes in familiar behavior, and they are annoyed by tedious data-entry sequences, difficulty in obtaining necessary information, and inability to produce their desired result. I.Huda Banuqitah

30. The Eight Golden Rules of Interface Design 8. Reduce short-term memory load. Humans’ limited capacity for information processing in short-term memory (the rule of thumb is that people can remember “seven plus or minus two chunks” of information) requires that designers avoid interfaces in which users must remember information from one display and then use that information on another display. It means that cellphones should not require reentry of phone numbers, website locations should remain visible, and lengthy forms should be compacted to fit a single display. I.Huda Banuqitah

31. إضاءات I.Huda Banuqitah

32. Assignment #1 Consider the following use case diagram for a university registration system and identify the user requirements for the use cases, ‘Register for Classes’ and ‘Bill Student’ and draw sketches on paper using pencil (not wireframe using balsamiq) to show all possible user interfaces to perform both tasks for a web-based application (not mobile application interfaces). I.Huda Banuqitah