TENTA

Question 1

Safe Exploration

Answer 1

When a user can feel safe to explore a GUI freely, without having to face dire consequences, such as pop ups, or having to turn down volume

Question 2

Instant Gratification

Answer 2

Users would like too see instant results from actions they take. From a designers perspective we should anticipate the users moves and make these very easy. Example, if ur designing a design tool. The first step when opening the program would be to create a empty canvas

Question 3

Satisficing

Answer 3

Users wont carelessly scan an interface to choose which button they should click. They will quickly scan the interface and click the button which seems most reasonable, even at the risk that button is wrong! Satisficing = Satisfying + sufficing. Users often take the good enough route, so we as designers should design things to make this easier. Direct buttons, short labels, make it easy to navigate back if an user navigates wrong

Question 4

Changes in Midstream

Answer 4

People often change their minds in the middle of doing something. Dont lock people in a process without giving them the change to exit in the middle of it. Also make it so that one can easily start a process, leave in the middle, and come back to the same place with the information already entered.

Question 5

Deffered choices

Answer 5

This stems from users need of instant gratification. Give the user the possibility to finish a task without forcing them to “register” or “enter details”. Instead give the user the ability to skip these things and go back to them later on. Dont force users with to many upfront choices, and make it clear that some options are required and some are optional.

Question 6

Habituation

Answer 6

Follow common design patterns and tools to make the site feel recognisable. Use shortcuts that all other applications use. Make buttons look the same and do the same thing.DONT for example make a shortcut do X in one mode and Y in another mode!

Question 7

Spatial Memory

Answer 7

People remember where things are placed. So a designer should place things and order things, how they usually are. This along with habitutaion is why consistency across interfaces are important. If you have a close button, you should probably place it at the top left corner of the window and so on.

Question 8

Keyboard only

Answer 8

Make the interface completely functional with just using the keyboard. Create shortcuts, selection from lists by using the arrow keys, tab to switch focus, the return key for ok/done/finish

Question 9

Feature, search & browse

Answer 9

A three-element combination on the main page of the site or app: a featured item, article, or product; a search box (expanded by default, or collapsed); and a list of items or categories that can be browsed.
Use when ur site provides long lists of items to be browsed and u want to engage users directly by giving them something to read/watch. Works because some people want to mindlessly browse and some want to search for the exact thing they need. Features engage users, they are more interesting then browsing and searching

Question 10

Canvas plus palette

Answer 10

An application that is centered around a working space in the middle, a canvas. Arranged around the central working space there are grids of tools called palettes. Often represented as icons. The tools are used to create and modify objects on the canvas. Used for graphical editors!

Question 11

Wizard

Answer 11

An feature or a component that leads users through a process step by step in a prescribed order. Used when you have a long/complicated task and you want to break it up to smaller more manageable tasks. This requires the user to surrender the ability to move freely and let the wizard take control of what happens next. This is why professionals often disregard wizards for being to rigid and limited.

Question 12

Alternative Views

Answer 12

VIews or methods that are used to visualize information that are substantially different from one another but are used to access the same information. When you cant find a way to show both features so you instead develop them separately and let the users pick. For example Yelp,a restaurant app. You can either see nearby restaurants as a list or you can find them on a map. Separate but same information.

Question 13

Many workspaces

Answer 13

An interface where users can view more than one page/tab/project/file. Gives the user the ability to multitask and view more than one thing at a time. Often can these views be placed side by side. OFten used when creating an app that is used to view/edit any type of content.

Question 14

Clear entry points

Answer 14

Present the user with only few clear entry points so the user knows where to start. This is good because first time users dont need to learn how the site works. This is good for an application where there will be many first time or infrequent users. Most of these users would best be served a small introduction or introductory task of some sort. If your app has a very clear purpose there is a risk that users would be irritated by this, since there is an extra navigation step. This design pattern might not be the best choice’

Question 15

Modal panel

Answer 15

A modal panel is a screen with no other navigation options, and contain only one task. This “forces” the user to do the task at the modal panel or exit out of it. It should be used when you have a small focused task that require the users full concentration. Like a login panel.

Question 16

Escape Hatch

Answer 16

A well labeled button or link that takes the user to the a well known place, like the homepage. Its good to have a escape hatch where we have limited navigation so the user can quickly get out

Question 17

Sitemap footer

Answer 17

A comprehensive organized category of links that are placed at the bottom of the site.This should provide a full scope of the website. Use this when ur app has many different sites with a lot of different information and you dont want to take up much header/sidebar space with navigation. You can also place links that are not in the header in footer. It also gives the user a sense of the hierarchical design of the website, and make it easier to navigate.

Question 18

Progress indicator

Answer 18

On each page in a sequence show the user the next page and where the user is. Often used in checkouts in a step by step manner. Use this when you have a process flow, a wizard, when you want to take the user through a step by step process. Dont use this if you have a large hierarchical navigation, in this case consider breadcrumbs. But if you have a linear “easy” navigation use this. This helps the users orientation since it knows “exactly” where they are, and how much they have left.

Question 19

Breadcrumbs

Answer 19

A specific type of navigation which shows the path from the starting screen through the hierarchy to the users page. Can be seen as a series of parent/child links. Use this when your site has an hierarchical structure with two or more levels and global navigation isn’t enough to identify where a user is, because of too deep hierarchies.

Question 20

Visual Framework

Answer 20

Across your entire app/site all the pages and templates should share characteristics like the basic layout, margins, headers, size and colors. Make it so that the entire app “hangs together”. Use this when creating a site with multiple pages, and deliberately design it to look like one thing.

Question 21

Center stage

Answer 21

The task at hand should be placed in the center to draw the users attention to it. Cluster secondary tools and utils on “the side”. This is because we want the user to effortlessly find the important part of ur site, without having to wander their eyes all over it. Like google maps, where a map is in the center stage and the tools to navigate this map are on the side.

Question 22

Grid of Equals

Answer 22

Arrange content into a grid or a matrix where each piece of content carries the same visual weight. The content should also follow the same template. Use this when you want to visualize a list of objects of same importance, such as products. This significantly increases the visual flow of your interface.

Question 23

Titled sections

Answer 23

Define separate sections of content by giving them a strong and clear title. Separate theses sections and visually arrange them on your page. Do this if you have lots of content you want to show but you want to make it more digestible and easy to scan. This also makes the information hierarchy more structured and obvious for the user.

Question 24

Module tabs

Answer 24

Put modules of content into small tabbed sections that can only be visible one at a time. You can bring these tabs to the front to view them. Use this if you have lots of heterogeneous content you want to show and you dont have room for everything on the same page. Users should only need to see one module at a time, the modules should be of similar size, preferably less than 10 modules, the set of modules should be fairly static, the modules content should be related to one another. This is effective for decluttering your interface and not overwhelming users with too much content.

Question 25

Incremental construction

Answer 25

In building style interfaces, make it easy for users to build small pieces at a time. And dont make the user wait for feedback or results. Keep showing it to the user as they keep buildng

Question 26

Microbreaks

Answer 26

People often need breaks in their day to day. If your application is something that people would do on their breaks. Make it easy for them. For example reading streams and feeds like facebook or twitter. Or reading your email. These interfaces should be quick to open and easy to reach their goal. If an user is signed in, make sure to provide the ability to stay signed in.

Question 27

Prospective memory

Answer 27

The memory of your plans for the future.Like leaving something important on the table so your forced to see it and remember it. This has not gotten much traction in the designing community but it should be on your mind when designing applications. Lots of applications have built in features for prospective memory, like remainders, alarms and calendars. Programs like word remember the latest used and edited documents.

Question 28

Streamlined repetition

Answer 28

When your users of your program often finding themselves having to repeat a given operation many times. Make that operation easy and short so the repetition becomes easy and not irritating for the user. You can achieve this with shortcuts, keyboard shortcuts. A good example of this is the refactor function in intelliJ where you can rename every single instance of an object at the same time.

Question 29

Social Media, Social proof and collaboration

Question 30

Streams and feeds

Answer 30

A continuously updated series of images, news stories, web articles, comments, or other content presented in a scrollable, vertical (sometimes horizontal) strip or ribbon. The items in the feed are usually presented as “cards,” with an image from the article, a headline, introductory copy, and the name of the source with a link.

Use this when you have a app that updates often and users need to check it multiple times a day. Also if you have a project with collaborators and the users need to stay on top of answering comments and fixing things

This makes sure that every visit of the app/program presents new information every time and makes the user feel rewarded when opening it. This promotes the habit to come back another time

Question 31

Media Browser

Answer 31

Often used for content centric applications where the objects are presented in a grid with rows and columns. They often use thumbnails, item views and scrolling panes to ease navigation
Users know what to expect. Browse through the grid. Find and object and click it to view it or use more functionality

Question 32

Dashboard

Answer 32

Dashboards are the first thing an user sees when entering the software. Often used in business softwares.The dashboards show key data points in one single data dense page. Often with charts, statistics , important messages. This makes it easy for users to get a quick update on important information, messages or tasks to be done! Its good to use if your app works with a large flow of incoming data and your users need to be continuously monitoring that data.

Question 33

Settings editor

Answer 33

A separate easy to find window or page devoted to changing settings. These will often be split amongst different tabs to not make it overwhelming. Should be used when you have a large application and users would need to find and change specific settings.

Question 34

Menu page

Answer 34

Fill the homepage with content rich links and show enough information so the user can choose well, but show no otter significant information. This is a good choice when designing a page where the purpose is just to be a table of content but you cant much information. If your page needs to drag/hook users this might not be the best choice. But if you want to provide fast navigation without distraction its good!

Question 35

Pyramid

Answer 35

Create a parent page and link that to all other pages with next/back links and buttons.A photo album is a good example where the homepage is the parent page. The you can click on a photo and switch between them with arrows. Use this when the users can view content in a slideshow way. So that the user can back out and “skip” in the slideshow.

Question 36

Fat menus

Answer 36

When you display a long list of navigation options in a drop down menu. This is used to show all subpages of ur interface. Usually these are organized in the menu for more structure. Use this when your site has multiple pages that you want to show to the user, for easy exploration.

Question 37

Sign in tools

Answer 37

Sign-in Tools: A utility for navigation related to a users sign in experience placed in the top right corner of the site. This can be tools as shopping carts, profile, account settings, sign out buttons, help. This is used when ur designing a site that users will sign into. This is a convention today.

Question 38

Accordion

Answer 38

Put modules of content into a colinear stack that can be opened and closed independently of the other modules. Like the left toolbar of scenebuilder where you can open and close the modules containers, controls, gluosn, shapes independently of the other modules. Use this if you have lkots of heterogenous content and you dont have room for everything on the same page. Users might want to see more than one module at the same time. The modules are of different height but of same width, modules are part of a two level menu or some other coherent system of interactive elements,

Question 39

Collapsible panels

Answer 39

Put modules of optional content or functions into panels that can be closed/opened by the user. Use this when you have lots of content that needs to take visual priority and the modules should have following characteristics
The content annotates, modifies or explains the content of the main page somehow, the modules are not important enough to be open by default, Their value can vary from user to user, some users will never need it, but some will desperately need it. A user might need it sometime but most often the space it takes up is better used for the main page. USers might need to open more than one module at a time. The modules are not related, this is the main difference from accordion and module tabs.

Question 40

Movable panels

Answer 40

Put content into boxes that can be opened/closed independently of the other boxes. Give the user the ability to freely move and arrange these boxes into a custom configuration. This is often used in Center Stage graphical design tools. Use this if your app is something users often sign into, and that the main page is something that the user spends most of its time at. You have lots of heterogenous content to show in smaller modules, Modules should:
Users will almost certainly want to see more than one module at a time.
The value of the modules can vary from user to user.
The modules vary a lot in size
Their position on the screen isnt terribly important to you, but it might be for the user
There are many modules, possibly that many that the user would be overwhelmed too see them all at the same time.
Your willing to let a user hide these modules with a function to bring them back.

Question 41

Two-Panel Selector eller Split View

Answer 41

In a split view we split the interface into two parts. One part where you show a list of objects that a user can choose from at will, on the the other show the content that the user chooses. Like spotify where one of the views are your created playlists and the other view is the playlist and its content. Use this when you have a long list of objects and each object has interesting information/content that requires more insight. The user should see the overall structure of the objects in the list and keep the view of the list visible at all times.

Question 42

One-Window Drilldown

Answer 42

Show a list of items and when the user picks an item show the details and content of that item on the whole screen. Use this when your designing an mobile application or website and you have a long list of items to show. And these items have interesting content and information. Alternatively if your list items and the content might be too large so the list has to take up the entire screen. Most often used in constrained spaces.

Question 43

List Inlay

Answer 43

Show objects in as rows in a column. When users select an item, open its detail in its place, within the list itself. Push objects under it down in the list. Items should be able to open/close independently. Use this when you have a list of items and each of these items have interesting content and information to them. This content doesnt take up a large amount of space but too much space to show it in the list itself. The user should be able too see the overall structure of the list at all times while still being able to browse through the details of different items.

Question 44

Thumbnail Grid

Answer 44

Arrange a list of visual objects into a grid of “photos”. For example photo gallery. Use this if your objects have a small visual representation that identifies them, for example, an image, a logo, screen captures and so on. The list can be long and can be split into Titled Sections. You want to show a little information about the item but most of the item should be taken up by a picture. Implement functionality to select one or more items. This creates a strong visual hierarchy where all the images are seen as peers and make it very easy for the eyes.

Question 45

Carousel

Answer 45

Arrange a list of visually interesting items into a horizontal strip and let users scroll or slide through the strip. USe this if your items have visual representation that identifies them and tend to be in similar size. The strip doesnt have any categories. Youn want to show a little information about each item but the picture should take up most of the devoted space. Use this when users will casually browse and wont need an overlook on the entire list of items. This encourages browsing since the users have to inspect the items and keep scrolling. A user cant just directly jump into the middle of the carousel.

Question 46

Cards

Answer 46

A self contained component that contains images, text and sometimes actions. When you want to show a collection of objects which will all behave the same way. For example, all cards should have a image, a text, and a way to favorite, a link to a detail screen. THese might differ in image size or aspect ratio.

Question 47

Pagination

Answer 47

Break up a very long list into different pages and load them one page at a time. You should provide controls to navigate the pages. Use this if you have a very long list of items and users usually just browse the top of the list, or look for a particular item. This breaks the list into smaller chunks so the user wont be overwhelmed and it also gives the user the choice to see more or not.

Question 48

Jump to Item

Answer 48

When a user types the name of an item into a list, jump directly to that item. Use this if ur interface is using a scrolling list, a dropdown box, a combo box or a tree to present a long list of items. The user wants to select a particular item easily and quickly, preferably with the keyboard. This is used in file finders, long lists of names and so on. People arent good at scanning long lists to find the information they need, but computers are so let them do it.

Question 49

Alpha/Numeric Scroller

Answer 49

Display the letters of the alphabet, numbers or a timeline along the scroll bar of a list. Use this when users are searching for a specific item in the list and you want to make it more easy to find. This is closely related to jump to item in the way that it allows immediate jumping to a point in a list. Used in iphone contacts.

Question 50

New-Item Row

Answer 50

When you use the first or the last row of a list to create new objects and add them into the list. Use this when you have a table, list or any vertical presentation of a set and the user might need to add new objects to it but you dont have a lot of room for extra buttons and options. Also use this when you want to be explicit about what type of object the user is adding.

Question 51

Button Groups

Answer 51

A group of related actions in a small cluster of buttons which are aligned and treated the same graphically. Use this if you have lots of actions and you want to show them all the same time. And you want to visually organize the buttons. Some of the actions inside a group have similar actions or similar complementary effects. This makes the interface self describing and makes the visibility better. Each group will clearly announce what its for.

Question 52

Action Panel

Answer 52

A panel or a grouping of commands that is more than just a static menu. The panel can promote the most common actions or commands, depending on what the user is doing in the software. This is way to feature actions and commands in a more eye catching way. Use this when you have a list of items and actions that can be performed on these items. ANd there are too many to list them all, and to many to have hoover tools. An example is the windows action panel which shows the latest notifications which are call to actions.

Question 53

Prominent “Done” Button

Answer 53

A button or other screen component which is the preferable next step button or clearly the button to end a process. Whenever you need a Done, Submit, Ok, Continue button you should implement this pattern. Use a visually prominent button for the final step of transactions such as a online purchase, or the committing of settings. This gives the user a good sense of closure, the user clearly knows when the transaction is over and wont have to wonder.

Question 54

Hover or Pop-Up Tools

Answer 54

PLace buttons and other actions next to the items they act upon. But hide them unti the user hovers over them. Use this when you have an interface with lots of actions but you want a clean uncluttered look most of the time. Place the actions close to the items they act upon, and hide them. That way you have already dedicated space for the tools without compromising the clean look. This might not be good for a mobile application, so only use it when you are sure users are going to a use a mouse pointer. Example, discord reactions.

Question 55

Spinners and Loading Indicators

Answer 55

This is an animation or any other indication after a user submits an action and waits for a response. These indicators let the users know that their interaction is live and that a response from the system is coming. A spinner is the classic youtube buffering. And a loading indicator is a meter which shows key data about the task that takes long time. For example uploading/downloading a large file. Use this when you have an time consuming action implemented that takes longer than 2 seconds. The user can be impatient if the UI is locked, even if the mouse pointer is an hourglass. The UI should update and show that its working on it.

Question 56

Cancelability

Answer 56

A way to instantly cancel a time consuming process, with no side effects. Use this when you have a time consuming action that runs longer than 2 seconds, such as, printing a file, querying a database, loading a large file. Alternatively when the user is active in a process that shuts out the most other interactions. This is important because users change their mind often, and users should feel like they have total control and freedom over an interface. This also helps the case where the user accidentally started this time consuming process.

Question 57

Structured Format

Answer 57

Dont use a single text field, use a set of text fields that reflects the structure of the requested data. Use this when you are requesting specific kinds of text input which is formatted in a certain way. That format should be familiar and the you should expect that the user is not gonna deviate from the familiar format. Like credit card numbers, telephone numbers, postal codes. Dont use this if the preferred format of an input varies from user to user. For example if you are creating an international website, telephone numbers have different formats. This gives the user clear instructions on what is being asked for, the user wont have to worry about how to format the input

Question 58

Fill-in-the-Blanks

Answer 58

Arrange text fields in a sentence with the fields as blanks that the user needs to fill in. Use this when you need information from the user, usually one line of text,a number or a choice from a dropdown list. And you have tried to give each control a label but it still isnt clear enough to understand. For example Search for __category__ __state__ . Here it is clear that the category and state is needed for a search. But if we removed search for and just had labels. The action would be unclear. This makes the interface self explanatory since we all can finish the sentence .

Question 59

Input Hints

Answer 59

Beside or below an empty text field, place a phrase or example which explains what is required to enter in the textfield or gives additional details about the textfield. Use this when you have a textfield which needs inputs that isn’t obvious to all users. You dont want to put more than a few words in the label so you might need extra description. This spares users from having to guess . And if you visually separate the hint from the label, the users who dont need the hint cant completely ignore it.

Question 60

Input Prompt

Answer 60

Prefill a text field with an example or an instruction that helps the user know what to enter. A placeholder text. Use this if your UI presents text field, or a combo box but there isnt a default value that is reasonable. This makes the interface more self explanatory.

Question 61

Good Defaults

Answer 61

Use default values in forms to save the user time and effort in completing the form. These defaults can draw from different sources of data, previous entered data, data from a user account, current location, current date and other values that the designer thinks makes it easier for the user. Use this when you have a form requesting lots of data and you want to reduce the amount of work for the user. Providing defaults is not always a good idea. Dont use them for sensitive topics such as, politically charged questions, gender and passwords.

Question 62

Error Messages

Answer 62

When there is an input error in a form such as missing input, use an eye catching explanatory error message to make it easy for the user to fix the error. If possible you should use an indicator at the origin controller. This is because users will input wrong information and will miss required fields. So make it as easy as possible for the user to fix these problems.

Question 63

Forgiving Format

Answer 63

Permitting the user to enter a variety of choices, formats and syntax and make the system interpret it intelligently. Use this when ur UI asks for data which can vary in an unpredictable mix of vocabulary and white space. The UI can accept input of various kinds from the user. But you want the UI to remain simple. This is good because users mostly want to get something done without having to worry about formatting. And computers are good at handling different kinds of input. This works when the input isnt entirely predictable

Question 64

Dropdown Chooser

Question 65

List Builder