UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx

Actions and Commands:
Tap, Swipe, and Pinch
Rotate and Shake -Buttons -Menu Bars – Menus
Toolbars - Links- Action Panels
Hover Tools - Keyboard Actions- Drag-and-Drop
Typed Commands-Affordance-Direct Manipulation.
Forms and Controls:
Basics of Form Design
Patterns.

1. KONGU ENGINEERING COLLEGE (AUTONOMOUS) DEPARTMENT OF COMPUTER SCIENCE AND DESIGN 22CDT42- USER INTERFACE DESIGN UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS P.GOWSIKRAJA M.E., (Ph.D.,) Assistant Professor Department of Computer Science and Design

2. UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS Actions and Commands: Tap, Swipe, and Pinch Rotate and Shake -Buttons -Menu Bars – Menus Toolbars - Links- Action Panels Hover Tools - Keyboard Actions- Drag-and-Drop Typed Commands-Affordance-Direct Manipulation. Forms and Controls: Basics of Form Design Patterns.

3. 1. Actions and Commands Tap Swipe Pinch Rotate Shake Buttons Menu Bars Menus Toolbars Links Action Panels Hover Tools Keyboard Actions Drag-and-Drop Typed Commands Affordance Direct Manipulation.

4. 1. Actions and Commands We think of the verbs —designing actions and commands —as the methods people can use to perform tasks in your application. Specifically, what we mean by that is how the person using your software can carry out these tasks: Start, pause, cancel, or complete an action Enter a setting, configuration, or value Manipulate an object or component in the interface Apply a change or transformation Remove or delete something Add or create something Other patterns mimic real-world behaviors and methods directly.

5. 1. Tap:- Tap means to touch an icon, button, or object in the mobile OS. Doing this will either launch an application, click a button, select an object (like an image), or some other action. This is all determined by context. 2. Swipe:- Swiping is a common method for doing several other actions. swiping on a screen is a way of navigating: scroll a page up or down, move to the next image in a series, move through a carousel or list of screens, or bring up another screen in the app, such as a settings screen or information panel. as archive or delete.

6. 3. Pinch:- Pinching usually controls the view or zoom. Pinching —sliding two fingertips inwards, toward each other on a touch screen—causes the view to zoom out on a photo or web page. Reverse pinching on an image or web page—sliding two fingertips apart—causes the view to zoom in, or magnify the page.

7. 4. Rotate: Mobile devices are small enough that the entire device can be manipulated to perform commands—something that’s impossible with larger devices.  The accelerometers and other sensors in the mobile device enable this. Example , it’s now almost universally understood that when viewing a video or image on a mobile device, rotating it ninety degrees from vertical to horizontal will change the viewport orientation from portrait to landscape.

8. 5. Shake: Most often this is done to maximize the video for better viewing. Shaking the device is also a common way to perform actions. Depending on the application, shaking can skip a song or undo an action.

9. 6 . Buttons:- Buttons are placed directly onto the interface, without requiring the user to perform any action to see them, They’re big, readable, obvious, and extremely easy to use for even the most inexperienced computer users. It usually represented as single, large, eye-catching buttons—this is entirely appropriate for their purpose, which is to attract attention and say, “Click me!”

10. 7 .Menu Bars:- Menu bars are standard on most desktop applications.  They generally show an application’s complete set of actions, organized in a mostly predictable way (such as File, Edit, or View ). Some actions operate on the entire application, and some operate only on individually selected items. Menu bars often duplicate functionality found in context menus and toolbars because they are accessible—screen readers can read them, users can reach them via keyboard accelerators, and so on. Menu bars appear in some web applications, especially productivity software, drawing programs, and other products that emulate desktop apps.

11. 8. Menus- Pop-up menu: Also known as  context menus , pop-up menus are raised with a right-mouse click or some similar gesture on panels or items.  They usually list context-specific, common actions, not all the actions that are possible on the interface. Keep them short. Drop-Down Menus Users raise these menus by clicking on a drop-down control such as a combo box.  However, drop-down controls are intended for selecting choices on a form, not for performing actions. Avoid using them for actions. Pop-up menu

12. 9. Toolbars The canonical toolbar is a long, thin row of icon buttons.  Often, they have other kinds of buttons or controls on them, too, such as text fields or  Drop-down Choosers . Iconic toolbars work best when the portrayed actions have obvious visual renderings; when the actions really need to be described with words, try other controls, such as combo boxes or buttons with text labels. Cryptic icons are a classic source of confusion and lack of usability

13. 10. Links Buttons don’t need borders. everyone understands that colored text (especially blue text) usually indicates a clickable link. In a UI area where actions are expected but where you don’t need to draw attention or clutter the page, you can use simple clickable “link” text for actions instead of buttons. The link can be underlined by default, or you can have the underline appear only on hover. When the user rolls the mouse over the text, change the cursor and the link rendering. 11. Action Panels These are menus that the user doesn’t need to open; they’re always visible on the main interface.  They are a fine substitute for toolbars when actions are better described verbally than visually. See the  Action Panel  pattern.

14. Links Action Panels

15. 11. Hover Tools: If you want to show two or more actions for each item on an interface but you don’t want to clutter the page with lots of repeated buttons, you can make those buttons invisible until the mouse hovers over the item. Single-Clicking Double-Clicking single-clicking an object such as an image or a document file means they are selecting it in order to perform an action on it. Users tend to view double-clicking as either “open this item,” “launch this application,” or “edit this item,” depending on context. First, select the object. Then, apply an action or command, and it will be performed on the selected object Double-clicking on an image often means opening it in the creator or default application for viewing and editing it. Example, selecting a file on your computer desktop allows you to perform an action on it, such as “move to trash.” Inside an application. Double-clicking an application’s icon directly in most operating systems launches that application. single-clicking on an element will allow you to move it, scale it, or apply some action or command to it. Double-clicking a piece of text might edit it in place.

16. 13. Keyboard Actions There are two types of keyboard actions to consider including in your UI designs. Both could be considered types of “ accelerators .” Keyboard commands are also critical to enabling access to the interface by people with different levels of physical ability and who might need assistive technology. The goal for this group is to not be required to use the mouse and graphical user interface (GUI) components to enter commands. That’s why both techniques help the user control the UI without their hands leaving the keyboard. The two types of keyboard actions are  shortcuts  and  tab order .

17. Shortcuts Tab Order Keyboard shortcuts, such as the well-known Ctrl-S to save, should be designed into most desktop applications to support accessibility by differently abled persons, and efficient, rapid use by experienced users. In desktop applications, both native OS and web, we have the same accessibility and efficiency goals for tab ordering.  The major UI platforms, including Windows, Mac, and some Linux environments, each have style guides that describe the standard shortcuts—and they’re all very similar. Additionally, menus and controls often have underlined access keys, which let users reach those controls without mouse-clicking or tabbing. Tab ordering means being able to use the tab key to move the keyboard “focus” or selection from one screen UI component to the next. A selected UI component can receive keyboard commands, until the user moves the focus to the next screen component. This is useful for people who need to use voice browsers or who find full keyboard and mouse controls beyond their physical capability.

18. 14. Drag-and-Drop Dragging and dropping items on an interface usually means either “move this here” or “do this to that.” To drag a file onto an application icon to say, “Open this file in that application.” Or they might drag that file from one place in a file finder to another place, thus moving or copying the item. Drag-and-drop is context-dependent, but it almost always results in one of these two actions.

19. 15. Typed Commands Command-line interfaces (CLIs) hark back to a much earlier computer era when the GUI had not yet been invented.  Computer screens showed only text. Computer operating systems could be controlled by typing commands directly into a line or position on the screen for text input. CLIs generally allow free-form access to all the actions in the software system, whether it’s an operating system or an application. Unix and DOS operating systems worked this way.  Today, written SQL queries are a widely used form of typed commands.

20. 16. Affordance When a UI object looks like it might let you do something, such as tap it, click it, or drag it, we say it “affords” performing that action. It is, or has, an affordance. E xample: traditional raised-edge buttons afford tapping or clicking; a scroll bar affords dragging; a date picker looks spinnable or rollable and so affords spinning; a text field affords typing; a blue underlined word affords clicking or tapping.

21. Building on this, affordances for actions could include the following: Icons, objects, or shapes that are different from the rest of the interface Text that is styled differently from regular reading copy Something that reacts when the mouse pointer rolls over it Something that reacts when tapped or swiped A highlighted or high-contrast visual design treatment Some object that looks manipulable: drop shadows, ridges or texture, highlights An object or component that just looks different, or is separated with whitespace, from everything else on the screen.

22. 17. Direct Manipulation:- Direct manipulation (DM) is an interaction style in which users act on displayed objects of interest using physical, incremental, reversible actions whose effects are immediately visible on the screen. The Characteristics of Direct Manipulation: Continuous representation of the object of interest Physical actions instead of complex syntax Continuous feedback and reversible, incremental actions

23. 1. Actions and Commands Tap Swipe Pinch Rotate Shake Buttons Menu Bars Menus Toolbars Links Action Panels Hover Tools Keyboard Actions Drag-and-Drop Typed Commands Affordance Direct Manipulation.

24. UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS Actions and Commands: Tap, Swipe, and Pinch Rotate and Shake -Buttons -Menu Bars – Menus Toolbars - Links- Action Panels Hover Tools - Keyboard Actions- Drag-and-Drop Typed Commands-Affordance-Direct Manipulation. Forms and Controls: Basics of Form Design Patterns.

25. Forms and Controls: Basics of Form Design Patterns.

26. The Patterns The first patterns in this chapter talk about three of the many ways to present actions. putting actions on an application’s menu bar or pop-up menu, stop for a moment and consider using one of these instead: Button Groups Hover or Pop-Up Tools Action Panel Spinners and Loading Indicators is a well-known technique for letting the user know where they are in a multi step process, The last three patterns all deal with sequences of actions: Multilevel Undo Command History Macros

27. Button Groups A group of related actions as a small cluster of buttons, aligned and with similar graphic treatments. Multiple groups are possible if there are more than three or four actions. You can use  Button Groups   for app-wide operations, item-specific actions (Save, Edit, Delete), or any other scope. Actions with different scope ought not to be grouped together, however. Gestalt principles apply here. Proximity hints at relatedness; if the buttons are all together, they probably do related things. Conversely, button groups that are separated in space—or that are different in shape—imply unrelated groups of actions. Proper sizing and alignment help the  Button Groups   form a larger composite visual shape (this is the principle of closure).

28. Make a group out of related buttons so that they form a natural or logical set. An additional option is to label them with short but unambiguous verbs or verb phrases. Use vocabulary that makes sense to the users. Do not mix buttons that affect different things or have different scope; separate them into different groups. All buttons in the group should have the same graphic treatment: borders, color , height and/or width, icon style, dynamic effects, and so on. If all the buttons in a group act on the same object or objects, put the  Button Group  to the left or right of those objects.

29. Hover or Pop-Up Tools :- Place buttons and other actions next to the items they act upon, but hide them until the user hovers the pointer over them. In a mobile UI, have the tools appear next to an object when the user taps it. Hover Tools  are commonly used in list interfaces, in which many small items—photos, messages, search results, and so on—are displayed in a column or list. The user can perform a number of actions on each one. Slack uses hover tools extensively. They appear for each posting in the main feed or in a thread. The alternatives Slack; examples of hover tools for posts and threads.

30. YouTube web player

31. Action Panel A panel or other grouping of commands that is more than just a static menu.  The actions can promote the most common actions or the most relevant commands, depending on where the user is or what they are doing in the software. Action panels are a way to feature commands in a more eye-catching way. There are three main reasons to use  Action Panel  instead of menus or per-item buttons: visibility, available space, and freedom of presentation. Putting the  Action Panel  on the UI Set aside a block of space on the interface for the  Action Panel . Place it below or to the side of the target of the action. The target is usually a list, table, or tree of selectable items, but it might also be a document in  Center Stage.

32. Structuring the actions Simple lists Multicolumn lists Categorized lists with headings and groupings Tables or grids Trees Any combination of these in one panel

33. Labeling the actions For each action’s label, you could use text, icons, or both, depending on what conveys the nature of the actions best.  Text labels on an  Action Panel  can be longer than those on a menu or a button. You can use multiline labels, for instance—better to explain fully. Just remember that longer, more descriptive labels are better for first-time or infrequent users who need to learn (or be reminded) what these actions do. An Action Panel in Dropbox

34. Example: Microsoft Windows 10 Start Menu

35. Prominent “Done” Button or Assumed Next Step A button or other obviously selectable screen component that is the preferred next step or obvious conclusion to a screen or process. Whenever you need to put a button such as Done, Submit, OK, or Continue on your interface , you should use this pattern. More generally, use a visually prominent button for the final step of any transaction—such as an online purchase—or to commit a group of settings. Examples: The Google Play store on an Android OS mobile device displays information about a specific game.

36. JetBlue.com

37. Kayak.com Southwest.com

38. Smart Menu Items Menu labels that dynamically show precisely what they will do when invoked. This is a mechanism for making menus more efficient and responsive by offering different choices depending on what the user is doing. Your UI has menu items that operate on specific documents or items, such as Close, or that behave slightly differently in different contexts, such as Undo. Menu items that say exactly what they’re going to do make the UI self-explanatory. The user doesn’t need to stop and figure out what object will be affected. Adobe Lightroom

39. Preview Render a lightweight sample of the effects of a command, or the likely outcomes of an action. They are proactively rendered before the user has even submitted the action. This is a pattern in which the user is presented with realistic modeling of their possible action outcomes so that they can choose the one they like or want. This pattern is the opposite of the more simplistic and traditional interaction design method whereby the user must activate a command first and then wait to see what the results are. Apple Photos app and Bitmoji app

40. Toyota.com

41. Sephora.com

42. Spinners and Loading Indicators An animation or other indicator that displays after a user submits an action and before there is a response.  If there is a delay in this response,  Spinners and Loading Indicators   let a waiting user know that their interaction session is “live ” and that a response from the system is in progress. This prevents users from breaking their task focus. Spinners A spinner is an animation that shows the system is processing something. It is normally stateless; that is, it does not communicate a changing state such as percentage complete (although this is not a rule).

43. Loading indicators A loading indicator is usually a meter or thermometer-style animation that shows key data about a task that takes a long time. E xample, uploading large files or images, or loading a mobile app on the consumer’s mobile device. Loading indicators show a constantly updating “empty/full” meter plus helpful data such as percent complete, bytes of data processed versus unprocessed, and how much time remains to completion. Apple iOS, CVS mobile app; An iOS spinner example

44. Twitter Bootstrap component library ( getbootstrap.com ) border spinner Blueprint UI toolkit ( blueprintjs.com ), button loading state

45. Google Play store, Android OS

46. \Multilevel Undo The ability to reverse a series of actions performed by the user.  Multilevel Undo  is a combination of simple undo combined with a history of user actions, with their sequence captured as well as the actions.  Multilevel Undo  is a way of reversing any recent history of commands or actions step by step, in the opposite order in which they were performed. reversible in most applications: Text entry for documents or spreadsheets, Database transactions Modifications to images or painting canvases Layout changes—position, size, stacking order, or grouping—in graphics applications File operations, such as deleting or renaming files Creation, deletion, or rearrangement of objects such as email messages or spreadsheet columns, Any cut, copy, or paste operation

47. Navigation actions are a good example of this kind of ribbon-like, nonreversible action. Text or object selection Navigation between windows or pages Mouse cursor and text cursor locations Scroll bar position Window or panel positions and sizes Changes made in an uncommitted or modal dialog box

48. Design an undo or action history stack Each operation goes on the top of the action history stack as it is performed. Each undo reverses the operation at the top (the most recent action) first, then the next one below it (the next most recent), then the next, and so on. Redo works its way back up the stack step by step. The stack should be at least 10 to 12 items long to be the most useful, and longer if you can manage it.  Long-term observation or usability testing can tell you what your usable limit is.

49. Presentation Finally, decide how to present the undo stack to the user. Most desktop applications put Undo/Redo items on the Edit menu.  Also, Undo is usually hooked up to Ctrl-Z or its equivalent.  The best-behaved applications use  Smart Menu Items  to let the user know exactly which operation is next up on the undo stack. Microsoft Word History of Actions

50. Undoable actions As the user performs actions, keep a visible record of those actions—what was done to what, and when.  This is a list or record of the steps that the user took. This list is visible, and can be manipulated by the user, applying or removing or changing the sequence of these actions. Usually this is in conjunction with a file, photo, or other digital object that is being changed by these commands. Browser history As the user browses the internet browsers keep a visible record of the sites, apps and URLs they visit.  This is more like a log file. This data can be searched for keywords in the URL string, or browsed by date. This is useful for finding a site that the user visited before, but can’t remember the exact URL.

51. Repeat an action or command done earlier, which they don’t remember well Recall the order in which some actions were done Repeat a sequence of operations, originally done to one object, on a different object Keep a log of their actions, for legal or security reasons Convert an interactive series of commands into a script or macro. Google Chrome History screen

52. Adobe Photoshop CC

53. Macros Macros are single actions composed of other, smaller actions.  Users can create them by recording or putting together sequences of actions. These can be saved for reuse, by themselves or in a sequence of other commands. They might want to loop over lists of files, images, database records, or other objects, for instance, doing the same things to each object.  You might already have implemented  Multilevel Undo  or  Command History . No one wants to perform the same set of repetitive interactive tasks over, and over, and over again! This is exactly what computers are supposed to be good at. described a user- behavior pattern called  Streamlined Repetition ; macros are precisely the kind of mechanism that can support that well. Macros obviously help users work faster. Defining the macro Running the macro

54. Here are some examples of what IFTTT recipes can do: Synchronize the profile photo across all your social media accounts Automatically back up image files from social media to a cloud storage account Turn home automation devices on/off based on your mobile Save social media posts to a cloud spreadsheet Save fitness data from devices to a cloud spreadsheet IFTTT (If This, Then That) applet creator

55. Forms and Controls: Basics of Form Design Patterns.

56. Input controls: Button Textbox Drop d own Radio box Check box Navigation control: Link Bread crumbs Tabs Menus accordion Navigation control: Link Bread crumbs Tabs Menus accordion Basics of Form Design:

57. On/off switch Numeric steppers Sliders Application bars Scroll bars Menubars Rules Splitters IOS native control Progress bars UI CONTROL GUIDELINES Charts Annotation Cover flows Audio/video player Special pickers Images Map Camera Text editors Sitemaps Tables

58. UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS Actions and Commands: Tap, Swipe, and Pinch Rotate and Shake -Buttons -Menu Bars – Menus Toolbars - Links- Action Panels Hover Tools - Keyboard Actions- Drag-and-Drop Typed Commands-Affordance-Direct Manipulation. Forms and Controls: Basics of Form Design Patterns.