Section 3 Flashcards
1
Q
Architecture?
A
The conceptual structure and functional behavior distinguishing the organization of data flows and controls, logical design, and physical implementation
2
Q
IA?
A
Information architecture
3
Q
List two IA Methodologies often incorporated in UX design?
A
Library science. Cognitive psychology.
4
Q
Library science?
A
Library science is the study of how to categorize, catalog, and locate information. It’s all about creating meta-data, which can be used to locate a resource later. Contrary to what its name may imply, library science isn’t strictly limited to libraries. It’s particularly useful to the IA Side of UX design, which is concerned with creating organized applications
5
Q
Give one example of library science?
A
One example we can look at is yelp, website, Responsive web app, and mobile app that lets you find nearby businesses and restaurants. While it may be based on location and proximity It’s really no different than a library. Imagine that a location on Yelp is a book in your library. It’s the UX designer’s job to make sure the user can easily weed through the millions of restaurants in order to find the restaurant they seek
6
Q
Cognitive psychology?
A
Is the study of how the mind works and the underlying processes take place in a persons mind. A few important aspects of cognitive psychology that directly relate to UX design or cognitive load, mental models, and decision making. As you read through the following terms and review the corresponding images, think about how each plays into your user journey
7
Q
Cognitive load?
A
A cognitive load refers to how much information a person can process at any given time. Keeping this load low is important to prevent overloading a user with too much data at once
8
Q
Mental models?
A
As mentioned in exercise 2.5, mental models and user journeys, a mental model is an assumption that a user may have before using a given system. In the image below, a user fills out a form and expects the brightest button below the form to be the submission button, allowing them to move on to the next step. What if, however, this button actually canceled the process? Doing so would violate users previous assumptions and create intense friction
9
Q
Decision making?
A
People don’t want to make hard decisions. As the US designer, it’s your job to make sure that the choices users face are clear and simple. In the image below, the user only has to make one decision that relates directly to the task at hand. Do I fill out the form and press send? Or do I skip this step? There are no other links or buttons on the page, making it a distraction free and, thus, easier to accomplish the task at hand.
10
Q
IA Structure?
A
IA Structure refers to how pages in design, also interchangeably called screens are laid out, connected, and given different levels of hierarchy within a website or application.
11
Q
IA structures are illustrated using something called a_______?
A
Site map
12
Q
Site map?
A
A site map, which is an organizational map that outlines the hierarchy of the website or application
13
Q
How are site maps different than user flows?
A
Site maps are different from user flows as they focus on the page hierarchy rather than the specific actions a user takes to traverse the application. This means the designer would consider the generalized structure of pages in relation to each other as opposed to thinking about each action a user would take to reach a goal. Therefore, the task or options available to a user within a page would not be visible on a site map. Nevertheless, a user flow would influence a site maps hierarchy. It’s always our job is designers to ensure an intuitive path through our product for the user to complete their desire action.
14
Q
_________ Display hierarchy from broader to more defined pages/screens?
A
Site maps
15
Q
List three things that site maps do not do?
A
They do not specify all actions or elements of an individual page. They do not specify what the layout or hierarchy of an individual page should look like. They aren’t meant to be used to plan a continent of your individual pages
16
Q
A very important step when creating a response of the web app is to?
A
A very important step when creating your responsive app is to develop a functional site map for your product. The first step here is to decide on the basic structure you will base the site map on. The nature of your product, how complex the content is, and the types of content it offers will all determine which structure you choose when making decisions about information architecture. There are several types of structure that can be utilized in IA. The examples below show some of the most common structures and their corresponding site maps
17
Q
Single page?
A
This is exactly what it sounds like, an application or website that contains all functionality and information within a single page. This is great for a very simple website and applications e.g., the website for a local restaurant where a visitor can view the menu, opening hours, and contact information all on one page
18
Q
Flat structure?
A
In this structure, each page is at the same level in the hierarchy. No page is more important than the other, and you can’t go any deeper within the hierarchy. This structure works well with informational brochure style websites where all pages are equal in importance e.g., a site that only contains a homepage, and about page, and a contact page. It can work well on the informational websites and apps for small businesses such as a flower shop or restaurants.
19
Q
Index page?
A
This is similar to the flat structure discussed above. The one difference, however, is the visitors will first land on a home or index page it’s higher than all other pages. From here, they can navigate to different areas on the site. Each of these areas are of equal importance in the site hierarchy. If this site was for a restaurant, for example, it may include a home or index page from which you can navigate to a menu page, a contact page, and an opening hours/calendar page
20
Q
Strict hierarchy?
A
This structure is a little more complex than those explored previously. Here, do you navigate to sub pages from the homepage. Each sub page or parent page leads to a series of its own sub pages or children pages, but you have to follow the correct path in order to reach the child’s sub pages. This structure is used for more complex sites such as online newspapers, stories, and blogs where content is organized by multiple categories think of a local newspaper site. Do you have a homepage with links to the daily news. From here, however, you can navigate to different sub categories such as think sports, environment, and politics. From each sub category, you can dive even deeper. On the sports page, for example, you can navigate to basketball, football, and baseball
21
Q
Call existing hierarchies?
A
This structure is the same as the strict hierarchy discussed above with one exception, you can access each child page from different parent pages. This works well if there’s a great deal of overlapping information on your site or app. For example, if a user were browsing an article on seasonal vegetables on your good food blog, you might want them to have easy access to the recipes page to make use of their new knowledge.
22
Q
What are the five most common task of IA including creating?
A
User flows what you’ve done an exercise 2.6 Task analysis and user flows. Wire frames. Site maps. Navigational structure. Labeling and data modeling.
23
Q
What is the technique that will help you iron out your site map and make it more intuitive?
A
Card sorting
24
Q
Card sorting?
A
Card sorting is a participatory design method used to evaluate or generate ideas for the information architecture of a product or service. As the name implies, card sorting is usually done with cards, either physical or digital. A participant is asked to organize content topics into categories that make the most sense. The aim is to find patterns they give clues about the most logical and user friendly way to organize your website or application.
25
Card sorting takes the guesswork out of work?
Card sorting takes to guesswork out of organizing information. He can help you build a structure for your website, decide what to put on the homepage, and label categories for navigation. Of course, it’s up to you to do a little legwork out front by getting to know your potential users and understanding the aim of your content.
26
List the two types of different cards sorting?
Open card sorting period closed card sorting.
27
Open card sorting?
In open card sorting, participants are as to group websites or product content into their own categories, then name these categories. The names should be short but descriptive. You specifically refrain from giving users the category names. This allows your Users to categorize the contact them selves in the way they feel is most logical.
28
Closed card sorting?
Participants are asked to group website or product content into predefined categories. If we were to conduct a closed cards work with the same con tent cards from above, we might use the following categories to sort the continent
29
Closed card sorting is useful when what?
Close card sorting is useful when you already have predetermined categories and simply want to know how to organize your new content. He can also be used to validate hypothesize categorization
30
What items do you need to do cards sorting?
All you will need is a pen, sticky notes, and a small group of participants
31
What are four things that can be applied to both types of cards sorting?
Randomize the order if possible. Give a time estimate. Limit the number of cards. Break up sorting into parts.
32
Randomize the order if possible?
Consider randomizing the con tent for each card sorting session to remove any buyers it could result from having the same organization at the beginning of each sore.
33
Give a time estimate?
It’s helpful to let the participant know upfront how long the sorting exercise should take. This will reduce the feeling of her redness that could skew results
34
Limit the number of cards? It might be tempting to put every topic or category that you can into the sort, but this can actually make things more complicated And difficult for the participant. Try to Provide no more than 30 to 40 topics and categories
35
Break up sorting into parts?
Try starting with an open sore. This will help you organize the high-level sections of your application. Afterwards, use a closed card store to test your labels and ensure their intuitive
36
How to conduct a card sort?
The easiest way to conduct a card store is digitally. There are tools that make this process quite simple and allow you to reach a wide audience by simply sending them a link to the test. Optimalsort Buy optimal workshop is a great tool for this
37
What is the second or different option and the one listed above for performing cards sorting?
The other option is to conduct a physical card sort. This works well if all your Participants are nearby. The tactile nature of this test can also make it seem more fun, almost like a game
38
What three steps would you conduct on either a digital or physical card sort?
Create a list of topics from your website or app content. Try to stick to no more than 30 to 40 topics. If using online software, test out the program yourself ahead of time so that you’re familiar with the process. If you’re conducting a physical test i.e., a test/card sorting session conducted in person, simply write each topic on an index card. Make sure you have the blank cards available if you’re conducting an open short test so that these users can write categories on them. You could also use differently colored cards for topics and categories. Set up the session, notify your participants, and finally conduct the test.
39
Be sure to prep your testers on what before the card sorting?
Be sure to prep your testers on the time commitment, what a card sort is, and what to expect from the process before the test begins. This is a small but important step. When your testers are aware of what they’re expected to do, they’ll be able to focus more on the session rather than trying to figure out what’s going on
40
What is the next step that you will need to do after completing a digital card sorting exercise?
Once your sessions have concluded, you’ll need to analyze the results. If you used an online card sorting program, they’ll likely offer some sort of analysis or metrics regarding your card sorting results. This makes the analysis part a bit easier as they can spot patterns or trends for you
41
What is the next step you will need to do after performing a physical card sorting exercise?
If you’re doing and in person card store with physical cards, it’ll be up to you to analyze the results and write down any patterns do you notice in order to help form your site or app structure
42
After you have gathered the results for the card sorting you can use what three questions for analysis?
Have you noticed any patterns in the responses? Are there any results that stick out to you? Are you surprised by any of the results?
43
Card sorting is not a method of evaluation, rather it is what?
Rather, it’s a participatory design method that helps facilitate user centered input and supports other UX activities such as task analysis, content auditing, and heuristic evaluation.
44
List the four pros with card sorting?
Affordable. Easy and quick to implement. Encourages user participation early on. Sheds light on white great site structure looks like.
45
List the four cons with card sorting?
Isolated from the users task. Results may be inconsistent. Analyzing the collected data may take a lot of time. May only catch cursory traits such as documented type rather than Site con tent or user journey
46
_________ Is one of the most important aspects of UX design?
Navigation
47
Heuristic?
A heuristic Is a mental shortcut that allows people to solve problems and make judgments quickly and efficiently. These rule of thumb strategies shorten decision making time and allow people to function without constantly stopping to think about their next course of action.
48
Your implies?
Your implies the objective perspective of the software, almost as if it were a personal assistant.
49
My?
My, on the other hand, implies more personal ownership, so my library or my files makes sense given that these are objects which actually do belong to you. If you’re specifically talking about something that the system has provided or created for you, on the other hand, then your might makes more sense. E.g., your suggestions of your results
50
What’s a design pattern?
Simply put, a design pattern is a reusable, well-known solution to a usability problem. As humans, we look for familiarity in our every day lives. Cloud formations might look like dogs and bunny rabbits, star constellations take human form, and we will see familiar faces and sees a People. These are all patterns we look for instinctively, or perhaps even haphazardly
51
To design patterns that are almost thought of as expectations to end-users, what are they?
It’s standard for mobile devices to offer multi touch gestures. Nearly every photo you encounter on a mobile device can be zoomed with a pinch gesture.
52
Learn ability?
How easy is it for a user to learn how to use your software? As mentioned previously, sticking to no one design patterns can ensure that your software is as easy to learn as possible. Here are some patterns that specifically help improve learn ability
53
On boarding?
On boarding is the process of showing the user how your software works Maya and information walk-through. Good on boarding uses plain language and pleasant visuals to describe features, giving you a sense of progress as you go so you know how many steps are left
54
Interaction design?
Interaction design is typically considered a subject of UX design, focusing specifically on the way users interact with a product, environment, system, or service. While UX design is concerned with the experience, look, and feel of the software as a whole, interaction design is concerned with the specific interactions that occur when using the software. Things like page transitions and buttons, touch interactions, keyboard and mouse input, etc. all fall under the umbrella of interaction design
55
What is usability?
Usability refers to the ease with which users can navigate a user interface. If your app or website ranks high and use ability, users can navigate it smoothly and accomplish their goals without trouble
56
In regards to the term usability, list five quality attributes?
Learn ability. Efficiency. Memorability. Errors. Satisfaction.
57
Learn ability?
This refers to a user interphase that makes it easy for users to accomplish their goals the very first time they see it. Apps or websites that fill familiar because they’re easy to get around or learnable
58
Efficiency?
This refers to the speed at which a user can accomplish their goals after they’re familiar with an app or website. In other words, after you’ve used an app once or twice, how fast can you navigate it
59
Memorability?
Have you ever gone through a period of time without using one of your favorite apps? Once you come back to it, is it still easy for you to use? Or, do you have to spend time re-learning its interface? This is memorability, or how easy it is for users to remember how to use an app or website after not doing so for a long time
60
Errors?
How likely are users to make an error, and how many do they make? After making them, is it easy for them to get back on track? This deals with user errors, when they happen, why, and how to help users get around them
61
Satisfaction?
This refers to how enjoyable it is to use an app or website. Is it gratifying and fun? Or, do users feel miserable using it?
62
What is heuristic?
a heuristic Is a principle that is an exactly a rule, but isn’t exactly not, either think of it more as a rule of thumb or guide. Heuristics by nature Are not black and white rules to follow, instead, they Offer guidelines that can be applied in tweet based on a given scenario
63
Heuristics allow us to standardize what?
Heuristics allow us to standardize common methods we consider to be the right way of doing things
64
What are the reasons usability relies on heuristics rather than rules?
The reason usability relies on heuristics rather than rules is because designers are, and art doesn’t always conform to rules
65
For example, Red is typically a color reserve for?
For example red is typically a color reserved for negative actions and warnings, but take a look at yelp or Pinterest and you’ll see that all primary actions on their site use the color red
66
What are the 10 usability heuristics?
Visibility of system status. Match between systems and the real world. Use your control and freedom. Consistency and standards. Air prevention. Recognition rather than recall. Flexibility and efficiency of use. Aesthetic and minimalist design. Help users recognize, diagnosed, and recover from errors. Help and documentation.
67
What is a heuristic evaluation?
A heuristic Evaluation is a method used to uncover usability issues in a user interface so that they can be iterated and improved upon. It’s done by having a group of evaluators examine A given interface to see how well it adheres to the 10 useability he ristics above. This is typically done with more than one person. As it would be difficult for only one person to find any and all issues that may exist within an interface. Everyone is different, so, naturally, they’ll find different usability issues with an interface
68
When conducting the evaluation Each evaluator should inspect what?
Each evaluator should inspect the interface and conduct the evaluation alone. Only after all evaluators have completed their evaluation are they able to communicate and combine their results
69
List the different ways that evaluators can put this information together?
Evaluators can either write down their results directly or record their thoughts and findings out loud during the test. These recordings and then be used later for interpretation. A third option would be for an observer to take notes during the test. This observer wouldn’t answer any questions from the evaluator. Instead, did urge the evaluator to find the answer to their questions themselves by the interface
70
How long does a heuristic evaluation last?
??????
71
Has the evaluators go through the interphase they should do what?
As the evaluators go through the interface, they should continuously reference the 10 usability heuristics to ensure there are no violations. If they Do you find something, however, they should either talk through it loudly if they’re being recorded or write down their findings. By the end of the test, they should have a list of all the usability issues in the product as well as which usability heuristics Were violated
72
The heuristic evaluation itself isn’t meant to do what?
The heuristic evaluation itself isn’t meant to generate fixes for any issues that are found, its main goal is to simply identify them, as well as why they exist, so the designer can come up with the proper improvements
73
A wire frame is what?
A wire frame is a static, visual representation of an interface
74
A prototype is what?
A prototype, on the other hand, can be a combination of wire frames and portrays specific interactivity between functional elements rather than merely divisional structure of an interface.
75
A wire frame depicts what?
A wire frame depicts a static piece of an interface, while a prototype represents an interaction or a flow of functionality
76
What does design Fidelity refer to?
Design fidelity refers to how closely the wire frame, prototype, Marquette, etc. matches the look and feel of the final system. Throughout the design process, the level of fidelity is continuously modified and increased based on user feedback, research, and design iterations. Therefore, it’s important to keep in mind that design fidelity is more like a status then an end date
77
A low Fidelity prototype is meant to?
A low Fidelity prototype is meant to highlight only the high-level functionality of a design. It purposefully glosses over the intimate details of a design such as color, spacing and imagery and is usually hand sketched in black-and-white or grayscale
78
Mid Fidelity prototype?
As the name implies, mid fidelity prototypes portray a bit more detail than low Fidelity prototypes, but they’re not as polished as high fidelity prototypes. They’re usually created using software such as Adobe XD, balsamic, UXPin, or photoshop
79
The advantage of mid Fidelity wire frame or prototype are? It was two steps
It’s digital, so it can easily be shared with others. Many wire framing and prototyping programs have built-in sharing tools to simplify This exchange. It’s still very easy to make large, rapid changes to a design
80
Hi fidelity prototype?
Unlike mid Fidelity prototypes, high Fidelity prototypes take much longer to create as the goal is to flush out every single detail of a design. He should look and feel like a live system in terms of graphics, spacing, and layout in closely resemble the finished product
81
Low Fidelity prototype?
Low level of details. Show off a bit more design detail and basic interactivity.
82
Mid Fidelity prototype?
Medium level details. Shows off a bit more design detail and basic interactivity.
83
Hi fidelity prototype?
High level details. Shows the high level, general user experience and gets everyone the line with the big picture.
84
List the four mediums that are used for creating Proto types?
Sticky notes. Grid and dot paper. Notecards. Stencils.
85
Sticky notes?
If you are a visually oriented person, you might have a hard time forcing yourself to ignore the small details when drafting a prototype. Luckily, there’s a type of prototype that makes focusing on details nearly impossible. As you may have guessed, sticky note prototyping is when you prototype your designs and interactions on eight 3“ x 3“ sticky note, such as a Post-it note, for example. Because you’re working with such a small space, you won’t be able to focus on the small details even if you wanted to. You can even try drying exclusively with a large tip marker. This forces you to keep your eyes in mind on the big picture and the overall flow of your design rather than getting distracted by all the little bells and whistle’s. Another great advantage to the sticky note method is that each note is portable and adhesive. This allows you to move them around, re-organizing elements and screens in real time.
86
Grid and dot paper?
One prototyping medium favor by many designers is grid paper. Unlike a white sheet of paper, grid paper allows you to draw straight lines and measure things out without the need of a ruler. When working with a grid paper, it’s a good idea to use a mechanical pencil, as the tip is very fine and allows you to draw precisely. Some designers feel like gridlines can be a bit distracting. If you feel this way, check out dot grid paper. It’s similar to grid paper made up of dots instead of grid lines.
87
What tip can you use to help you refrain from adding lower level details when using either style of grid paper?
It can be difficult to refrain from adding low level detail when using either style of grid paper. If you’re having trouble, try using a large tip marker. You can still use the grid as a general guide, but, like the sticky note method, it will help you focus on only the high level details. You can even cut out individual screens so that it’s easy to arrange them on a table and experiment with different flows.
88
Note cards?
Another method that’s great for mobile Proto types is to use the notecards to represent different screens of your app. It can be difficult finding notecards that are close to the actual size of a phone screen, but one trick that works well is to buy a box of standard size notecards and cut them down to the appropriate size.
89
Stencils?
Hey stencil is basically a shell that represents a specific platform. Trying your designs within a shell makes it much easier to visualize how your interactions will fill on the device.
90
Tips when using stencils?
There are stencils for each iPhone and android phone size, desktop applications, and even the Apple Watch. Some stencils are professionally produced and can be purchased online. Others can simply be download it for free and print it out take a look at the links included in the resource section for additional information on prototyping stencils.
91
List the five general steps when creating your low Fidelity paper prototype?
Decide which feature you’ll be prototyping and the medium you’ll be prototyping on, we recommend you use the same features of your wire frame that you did an exercise 3.4. Make a list of the key screens you’ll need to design in order to complete this function. If necessary, refer back to your user flows from exercise 2.6. Task analysis and user flows, as well as 3.3 navigation for mobile and desktop. Make a list of the Keith Screenshots need to design in order to complete this function. If necessary, refer back to your user flows from exercise 2.6 task analysis and user flows, as well as 3.3 navigation for mobile and desktop. For each page or screen, make a list of the key elements you’d like to include such as navigation, photos, sections, and any other page elements. This step helps you collect your thoughts and get an overall idea of what you’ll need to include. Start drawing out your wire frame one element at a time, making sure to focus on only high-level functionality of the feature rather than small design details such as spacing, color, and detailed imagery. If necessary, erase and re-draw sections or scrap entire pages and start over. Since you’re only designing a low Fidelity paper prototype, it’s easy to rapidly iterate over your designs. In order to keep from getting hung up on the details, try limiting your time on each iteration you do to no more than 10 minutes.
92
List three pros with prototyping?
Rapid iteration. Inexpensive. More creativity.
93
List three cons with prototyping?
Limited interaction. Not always self-explanatory. Missing minor details and potential errors.
94
Rapid iteration?
Paper prototypes are quick to create an easy to modify. Because of this, anyone can participate in creating paper prototypes
95
In expensive?
Because they’re quick to create, paper prototypes don’t cost much, but that doesn’t mean they can’t still add a lot of clarity to the project
96
More creativity?
Because you aren’t concerned with the small details or bog down by clunky software, your imagination is free to run wild
97
Limited interaction?
Certain elements of interaction can’t be realistically or effectively conveyed on paper
98
Not always self-explanatory?
Because of the simplicity, paper prototypes require effort in accurately communicating the design as well as the intention
99
Missing minor details and potential errors?
Similar to the above issue, the lack of detail makes it difficult to evaluate or foresee minor issues down the road
100
Splash screens?
When you launch a mobile or desktop app for the first time, The first thing you typically see is the loading screen, commonly called a squash green, which contains the apps logo in mission statement. The following screen is usually the introduction screen
101
Name two different options to help with the progressive on boarding?
Trello. Canva.
102
What is the prototype in process known as rapid prototyping?
Which involves quickly building on existing Proto types or mock ups to stimulate the future state of a system or application
103
The goal of rapid prototyping?
The goal of rapid prototyping is to iterate quickly on prototypes, adding hire Fidelity when necessary until finishing with a high Fidelity prototype
104
To rapidly prototype a desktop app, for example, a designer will?
To rapidly prototype a desktop app, for example, a designer will start with quick sketches made with pencil and paper, low fidelity that show off basic app functions. They will then create digital wire frames that can be connected together into a clickable prototype, mid fidelity and easily shared with fellow designers and stakeholders. Finally, will create an interactive, detail prototype that can potentially work in a web browser which is high Fidelity
105
List the three general step-by-step guide for rapid prototyping?
Prototype. Review. Refine
106
Prototype?
Convert user flows, stories, and sketches into a prototype that portrays a specific function or design solution
107
Review?
Share the prototype with any project stakeholders. You might even share the prototype with users to get their feedback
108
Refine?
Decide what you should change to improve the current prototype. At this stage, you will also decide whether it’s necessary to level up to higher Fidelity designs or prototypes in order to portray the final details of the program
109
Wire frames?
Show off the skeleton of a design. The goal of a wire frame is to get to an overall idea of how a design will be laid out without having to spend time deciding on colors typography, iconography, in other small visual details. You have already created low Fidelity wire frames an exercise three. Six and three. Seven. Since wire frames are not interactive and only show a single state of a user experience, they’re often accompanied with when words and arrows describing specific functions
110
Proto types?
As you already know, it can be low, mid, or high fidelity, and they show a specific interactions within an application. A prototype can be as simple as drawing on some sticky notes which is low Fidelity or as complex as a fully functional application with a browser which is high Fidelity
111
Mock ups?
Are static design dress used to structure information, visualize contact, and demonstrate the basic functionalities of a design. In other words, they’re fully fleshed out design drafts. Mock ups are considered high Fidelity is they include specific aspects and details of a design. They are not the same as wire frames
112
Low Fidelity prototyping?
Low Fidelity prototyping, Paper and sketches, Fidelity refers to the level of detail within a Design. Because of its low level of detail, a low Fidelity wire frame can only communicate basic user flow and user experiences. You will eventually, however, need to communicate the small details of the page to your team.
113
Hi fidelity wire frames rely on?
High Fidelity wire frames rely on precise placement, spacing, and often times actual copy to portray the look and feel of a design. This makes for less guess work when it comes to understanding functionality. It also allows a team to streamline development and design by making the main goals clear for everyone involved early on
114
The three benefits of a high Fidelity wire frame lie in its ability to?
The benefits of a high Fidelity wire frame lion its ability two, show a lot more detail, which makes it easier to produce a mock up. Provide a preview of what, real UI elements might look like. Effectively communicate functionality to developers and other stakeholders
115
Mid fidelity wire frame is much simpler as it’s only meant to?
The high Fidelity wire frame, on the other hand, shows the exact placement and shading and uses real text
116
Mid Fidelity wire frames are created once?
Mid Fidelity wire frames are created once basic functionality has been discussed and agreed upon.
117
The purpose of these more detail the wire frames is to?
The purpose of these more detailed wire frames is to convey form and function and specifics of the UI, rather than merely high-level details about the user experience. They require less subjective imagination to visualize how the design works, making it easier for stakeholders to understand the design and stay on the same page
118
Once you have solid mid or high Fidelity wire frames to work from, you can start considering?
Once you have solid mid or high Fidelity wire frames to work from, you can start considering how to implement visual design. Some teams have visual/UI designers who are dedicated to creating your apps aesthetic. Having already decided upon the structured, content, and the basic functionality enables whoever is working on visual design to focus more on the intimate details of the UI of a digital product.
119
Omnigraffe is best used for?
It’s a powerful tool for creating site maps, user flows, and basically any form of information architecture. It comes with some basic UI wire framing elements, but you Can download stencil packs from graffletopia, As well, which make it a much more robust tool for wire framing UI
120
One thing to keep in mind no matter which tool you choose is to always keep your work?
A critical yet unseen aspect of a designers role is competently organizing elements within a file. It may seem very simple, but there’s really allows you to work quickly and efficiently
121
When you begin your job hunt, interviewers May even ask you to?
When you begin your job hunt, interviewers me ask you to send your original prototype file to see how you’ve organized your layers and whether you’ve systematically named or organized the elements within each screen
122
You also learned that wire frames are?
Static
123
Well prototypes offer some level of?
Clickability or interactivity
124
You’re going to learn how to create high Fidelity wire frames and put them all together to create a clickable prototype. At the bottom of the exercise, you will also find a video demonstrating how you can do this using sketch for the high fidelity wire frames and envision for the clickable prototype
?????
125
_________ Are very popular in the design world and play an integral role in the product design process?
Proto types
126
_________ Are all still a very important part of lean UX?
Proto types
127
MVP?
Minimum variable product
128
This MVP is often a________. _______. ______ Rather than a finished product?
Hi fidelity prototype
129
A prototype is not a?
Final product, and it’s not expected to necessarily look and function like the finished product
130
How do you create an interactive prototype?
An interactive prototype to simply wire frames or visually design mock ups that have been put together with click events and/or basic animations to make it interactive. If a prototype is created with wire frames, it can be a low, mid, or high fidelity prototype. Yes it’s created with finalize Marcus, it could only be considered a high Fidelity prototype
131
List five of the most popular prototyping tools?
Adobe XD. Envision. Sketch. Axure. Peinciple and Flinto. Proto.io
132
Three great tools to create an interactive prototype?
Adobe XD. Sketch. Photoshop
133
Once you’ve completed your high Fidelity wire frames in the tool of your choice begin to do what?
Begin exploring your screens one by one
134
List the two ways you can export screens?
PNG. JPG files.
135
Next create a new project in what?
In Invision
136
The next step is what?
The next step is to use envision to add the screens you exported
137
Once you’ve added your screens to InVision, your create work?
You will create hotspots that will link your wire frames together and make them interactive
138
Remember, the screens are created in sketch or another tool and the leaking is done by what?
Why uploading your screens to InVision and creating hotspots once they’re updated
139
Below are instructions for converting the mid fidelity wire frames of the demo project into clickable Proto types using either what?
Using either Adobe XD or invision For this step is there both easy to use. Adobe XD allows you to create your design and prototype directly in one tool. Envision integrates easily with sketch. Don’t worry if you’re not a Mac user. Adobe XD is available for both Mac and windows, and Photoshop also integrates with Invision
140
List three steps when converting the mid Fidelity wire frames of the demo project into a clickable prototype?
Review the mid Fidelity wire frames previously created and identify anything that still needs to be finalized. Make sure all the elements and screens necessary for a user to complete the selected primary functions are in place. Open up Adobe XD, sketch, Photoshop, or the design program of your choice and begin translating each mid Fidelity wire frame into a high Fidelity wire frame. The high Fidelity wire frames should be grayscale include accurate spacing, sizing of elements, and copy. See the image above for an example. Yes you are using Adobe XD, switch over to prototype mode by clicking the appropriate button in the upper left. You can now start connecting the screens of your application. Begin by selecting an element that you want to be interactive, then click and drag out a line from the arrow to the right of the element. Drop the connection line on the target are bored. In the properties panel, you can now adjust the settings for the interaction, it’s trigger, type of action, animation type, easing, and duration see the image below. Continue by adding all the other interactions you want to for your prototype. To review your work, open the desktop preview by clicking the play button to the upper right of the screen.
141
Steps for prototype when using InVision?
If you’re using envision, create a new project in InVision and explore each screen of the application from the design program as a PNG or JPG, then upload them into envision
142
When using the build mode in InVision what do you Do next?
Add clickable areas to the imported wire frames in order to link up the screens of the application to build a clickable, interactive prototype
143
Once the prototype is complete do what next?
Get a public share link of your prototype. In adobe XD, click the share button in the upper left corner of the screen and select design review from the few setting drop-down menu in the Property inspector. Review the settings for instance, if you want to allow comments or set a password and click create link to get a share link. Comments for collecting feedback are possible with an adobe ID or also as a guest. In InVision, click the share button at the bottom right of the screen in order to get a public share link
144
Creating an InVision account is required to do what?
Creatine and InVision account is required to leave comments, so in case any testers do not have accounts, you could collect their feedback in another way, such as via email
145
The site map you have created for your project should provide a Birdseye view of your apps information architecture. But how can you successfully tell a story of how you designed your product?
This is an opportunity to show off your process. A great storytelling technique is to include images of design sessions such as card sorting, workshops, user interviews, etc. To demonstrate your unique work process. Although results from cards sorting sessions are not required as project deliverables in this achievement, they are still great visual elements to support the process through which you achieved your design
146
A few ideas you could work on as a few side projects to add an extra boost to your portfolio?
This is also the place where you can begin thinking about side projects it will give your portfolio an extra boost. Keep in mind that the more projects you have, the more diversified your portfolio will be. East side projects don’t need to have the same scope as your course project. They can involve helping a friend wire frame their new website, conducting a heuristic evaluation on an existing product, and proposing a few design solutions through paper or clickable Proto types. Be sure to ask your mentor for ideas and suggestions
147
Questions to ask yourself?
As always be sure that you’re asking yourself the following questions as your curating and reviewing your deliverables, to ensure you would be able to answer questions about them during an interview. Not only will answering them now allow you to write up more focused, thoughtful case studies for your deliverables, it will also ensure that you’re able to discuss your design decisions to employers during interviews. Or sometimes the interviewer will ask you Specific questions about your deliverables, other times, they may ask you to Simply describe your process from the beginning to end you need to be prepared and ready to handle both situations
What was your role for the stage of the project? What task did you face? What decisions did you make? What were the consequences? How did you come to these decisions? If you could, what would you do differently? What kind of data have you used to validate your decisions? What lessons did you learn during this project/activity?
148
Tip for whiteboard challenge?
One way to investigate the company hiring processes is to go on glassdoor and check out the interview section for the company in question. Often times, you’ll find past reviewer‘s mentioning the type of design challenges they were asked to do. Why are you might not get the same design challenge they did, it will likely be similar, so this can give you a leg up on your preparation and you might even find times you’ve asked to do the exact same design challenge yourself
149
One thing to remember when doing a whiteboard challenge?
One thing that’s important to remember no matter the challenger company you’re interviewing for is that there isn’t a correct solution to a whiteboard challenge
150
What are the interviewers looking for in a whiteboard challenge?
Instead, they are going to be looking at your general process, how you approach problems, how are you work through solutions, and how you work with others e.g., do you ask questions, keep other teams in mind, think about stakeholders, etc.
151
List for general tips for the whiteboard challenge?
Don’t start drawing right away. Go from high-level to low level. Communicate. Keep track of time.
152
Don’t start drawing right away?
A common misconception is that you should go straight to the board and begin drying immediately upon starting a whiteboard challenge. In a typical situation, however, this couldn’t be further from the truth. After all, how are you supposed to start drawing anything if you don’t fully understand the problem and it’s context.? Instead, spend the first part of your time asking questions. For instants, who are the users, how would your solution ideally help them? Where, how, and why would they be using your solution? In addition, ask about anything that might not yet be clear from the given problem statement, such as whether there are any constraints you’re working with team, budget, devices, etc. And what other stakeholders might be involved. You can write down notes, for instants, the problem statement, so it stays fresh in your mind i.e., users are teenagers or boomers. Focus on getting as much information as you can to ensure you understand the full context of the problem. Only then should you actually start to ideate
153
Go from high-level to low level?
As with most UX work, you should always start big and work small. For instance, you wouldn’t want to be working on the specific style or color of a button if you don’t even know how her user is going to be getting to that button. Once you fully understand the problem and it’s context from asking a lot of questions, you can start working on some of the deliverables that will help in form and shape your ideas, for instance, a Persona or two, followed by an overreaching user flow and more specific tasks if you have time. Only once you have gone to the steps should you actually move on to sketching out some potential screens remember your rapid prototyping skills. Following this type of workflow ensure that your final solutions address the problem and user needs, and also displays to the interviewers that you know how to approach a problem.
154
Communicate, communicate, communicate?
Talk through everything you’re doing out loud. This is the only way the interviewers will know what’s going through your head and why you’re making the decisions you’re making. Even something as simple as I’m going to start with a persona to ensure I understand the user and their needs, will go along way in communicating your thought process to those eager to understand your approach to problem-solving. Ask yourself questions as you work. Wonder out loud. Ask more questions of your interviewers. Talk yourself step-by-step through a potential solution. Only will this help you have a better grasp of what you’re trying to do, which can help guide you along, it will also prove to the interviewers that you know what you’re doing and can think critically and logically even in the face of large problems.
155
Keep track of time?
Because whiteboard challenges take place in real time, you will need to be able to manage your time to ensure you are able to walk through each step of the process and end up with a solution before the time runs out. If you are not sure how much time you have, ask. Then, set your self limits for each step, for instants, so many minutes to ask questions, so many minutes to create a rough persona, so many minutes to draw out a user flow, and so many minutes for a round of rapid prototyping. This is another reason why practice is so important, the more you practice conducting whiteboard challenges on your own, the more familiar you will be with your personal time needs, and the faster you will be able to jump from one step to the next. You may even want to time yourself with a stopwatch to have a better estimate of how long each step usually takes you.
156
List three tools to do a whiteboard challenge remotely?
Miro. Invisionapp. Excalidraw
157
Miro Is a handy tool for?
For writing notes, organizing sticky notes, drawing outlines, and brainstorming ideas
158
Excalidraw Focuses more on?
More on freehand drawing, like a real whiteboard
159
A great tip for whiteboard challenge when using miro?
A great idea when approaching a whiteboard challenge is to already have a framework set up in miro. Not only will this help you be more prepared, but it also leaves a great impression of you as being someone who is proactive instead of reactive. For example framework you can experiment with yourself, check out this article exploring frameworks for whiteboard challenges
160
Best way to prepare for a whiteboard challenge?
Practice
161
Questions to ask?
What methods have you use to reduce the cognitive load for your users? What were your learnings or takeaways from the paper prototype in process? How would you figure out whether your prototype does what it supposed to? Did you draw inspiration from existing apps? How did this inspiration influence your work? Imagine that we want to make our website responsive how would you approach this? When someone on your team, your boss, or your customer/user says, hey, I don’t like this Design, what do you do? How do you put yourself in the mind of the user? Looking back on exercise 3.4 design patterns for mobile and desktop, can you describe design patterns which are prevalent in your work?
