{"id":334,"date":"2013-06-27T08:17:07","date_gmt":"2013-06-27T12:17:07","guid":{"rendered":"http:\/\/localhost\/cs4760\/2014\/?page_id=334"},"modified":"2018-01-27T06:56:48","modified_gmt":"2018-01-27T11:56:48","slug":"interaction-styles-and-mobile-interactions","status":"publish","type":"page","link":"https:\/\/cs4760.csl.mtu.edu\/2018\/lectures\/interaction-styles-and-mobile-interactions\/","title":{"rendered":"Interaction Styles and Mobile Interactions"},"content":{"rendered":"<p>We will consider human-computer interactions from several perspectives:<\/p>\n<ol>\n<li>interaction style<\/li>\n<li>user&#8217;s concept of the interaction<\/li>\n<li>interactions for mobile devices<\/li>\n<\/ol>\n<h2>Human-computer Interfaces Styles<\/h2>\n<p>Although WIMP interfaces, which are a combination of Menus, dialog boxes, and \u2018point and click,\u2019 currently dominates interface designs there are other <b>forms of interfaces<\/b>:<\/p>\n<ul>\n<li><span style=\"font-size: 13px; line-height: 1.6em;\">Command line interface<\/span><\/li>\n<li>Menus<\/li>\n<li>Question-answer\/Dialog boxes<\/li>\n<li>Forms<\/li>\n<li>Spreadsheets<\/li>\n<li>Point and click<\/li>\n<li>Natural language<\/li>\n<li>Command Gesturing<\/li>\n<li>General Gesturing<\/li>\n<li>Direct manipulation<\/li>\n<li>Tangible interaction<\/li>\n<\/ul>\n<p>We will go through the list and identifying the technique in terms of how fast it is for the user, how flexible it is for users or expressive it is for the user, how long it takes for the user to learn, and how hard it is for the programmer to implement.<\/p>\n<p><b>Command line interfaces<\/b> are the original interfaces for the computer and are still used.\u00a0 Examples of command line interfaces are UNIX operating system commands and the VI editor.\u00a0 They are loved by system administrators for their accuracy, speed and flexibility.\u00a0 If the user knows the commands then typing is faster than searching for it in menus.\u00a0 Consequently, some applications try to offer both; for example auto cad or Windows Excel.\u00a0 Users can directly create script files and verbally specify the command sequence.\u00a0 Some commands can be hard to visualize and searching for commands or files can be frustrating and slow.\u00a0 The interface is easy for programmers to implement.<\/p>\n<p><b>Menus<\/b> are a basis of WIMP interfaces and a favorite with inexperienced users. Novice users can easily find commands.\u00a0 Searching the menus, the user builds up a metaphor for the application.\u00a0 Using menus is slow but fun. Using toolkits, menus are not too bad to program.<\/p>\n<p><b>Dialogs<\/b> or \u201cquestion and answer\u201d boxes are another old interface style. They are windows that pop up asking for information, fields to be filled or buttons to be pressed. Dialogue windows have been around before WIMP interfaces, they first appeared in database entry application programs. \u00a0Other example are wizards and some help agents. They ask a sequenece of questions using dialog boxes and in order to determine what the user needs. They are rather inflexible form of interface. Dialog boxes are easy to understand but\u00a0not very flexible or fast. They are easy to program.<\/p>\n<p><b>Forms<\/b>\u00a0are much like dialog boxes. They can be more sophisticated, and like dialog boxes not very\u00a0flexible for the user.\u00a0 <b>Spreadsheets<\/b> are a flexible and powerful form of interface, especially if the user can specify cell types.\u00a0 Data entry in spreadsheets is typically slow. They are more difficult to program.<\/p>\n<p><b>Point and click<\/b> interfaces were made popular by the web. \u00a0They represent I and P in WIMP. They were very suitable for the initial\u00a0web browsers (gopher) when web pages were all text.\u00a0 Users knew to interpret the underscore as a link to another web page.\u00a0 Now, links are <b>hidden<\/b>, for examples in images.\u00a0Icons on the desktop is another example of point and click style interface.\u00a0The notion of point and click is a short interaction that results in a very specific result.\u00a0 Because the user must move the mouse, this interface style tends to be slow for the user. It is flexible because many different kinds of UI objects can be pointed at. Short key interaction is a &#8220;point and click&#8221; interaction style without the point. Both are generally easy to implement.<\/p>\n<p>The most common example of <strong>natural<\/strong><b> language interface<\/b> are the interfaces for search engines. \u00a0Users type words in to the search box that the software interprets and return the result for the user. \u00a0They are hard to implement, but can be very flexible for the user.<\/p>\n<p><b>Command gesturing <\/b>interface style selects an object and uses a gesture to issue commands. In essences, it is a generalization of &#8220;point and click&#8221; interfaces. \u00a0Examples are swiping on smart phones and windows OS. Some games, Brother in Arms,\u00a0use command gesturing. Keith Ruthowski has demonstrated that a pie menu can become a form of command gesturing, and once the gestures are learned nearly as accurate and fast as text entry. Because algorithms for interpreting gestures are in its infancy, the flexibility of command gesturing is not known. They are difficult to implement. Learning a large set of gesture can take a long time.<\/p>\n<p><b>General gesturing<\/b> is a more general interface style than command gesturing. There does not have to be an object and the gesture does not have to represent a command. Examples of general gesturing are drawing applications and text entry by writing, like in a notebook. The Wii is advancing general gesturing in games. Because this is a very new interaction style, it is unknown how easy it is to learn, but it should be more flexible. It is more difficult to implement.<\/p>\n<p>Direct manipulation is closely related to command gesturing. An example of <b>direct manipulation<\/b> is drag and drop files into folders or trash. Drawing applications use direct manipulations. They can be slow to use but are fast to learn. They can be difficult to implement.<\/p>\n<p><b>Tangible interactions<\/b> refer to manipulating physical objects other than the mouse and keyboard. There are few current popular examples, but RFID and NF technology does make some tangible interactions possible. Low tech examples of tangible interactions are real buttons, switches and sliders. They can be fast or slow to use, but should be easy to learn, and can be hard to implement.<\/p>\n<h2>Conceptual Interaction Models<\/h2>\n<p>Preece, Rogers and Sharp in <em>Interaction Design<\/em> propose that designers should understand users\u2019 conceptual models for interaction. The understanding can guide designers to the proper interaction techniques for their system.<\/p>\n<blockquote><p>The most important thing to design is the user\u2019s conceptual model. Everything else should be subordinated to making that model clear, obvious, and substantial. That is almost exactly the opposite of how most software is designed. (David Liddle, 1996, Design of the conceptual model, In <i>Bringing Design to Software<\/i>, Addison-Wesely, 17-31)<\/p><\/blockquote>\n<p>The HCI designers&#8217; goal is to understand the interaction in terms of the users understanding of them. Preece, Rogers and Sharp propose four conceptual models for interaction concepts, based on the type of activities users perform during the interaction.<\/p>\n<ul>\n<li><b>Instructing<\/b> &#8211; issuing commands to the system<\/li>\n<li><b>Conversing<\/b> &#8211; user ask the system questions<\/li>\n<li><b>Manipulating and Navigation<\/b> \u2013 users interact with virtual objects or environment<\/li>\n<li><b>Exploring and Browser <\/b>&#8211; system provides structured information<\/li>\n<\/ul>\n<p>I propose additional conceptual interactions that are more passive:<\/p>\n<ul>\n<li><b>Passive Instrumental<\/b> &#8211; the system provides passive\u00a0information to the user, either from the environment or user&#8217;s action.<\/li>\n<\/ul>\n<p>User may interact with a system using more than one conceptual interaction model.<\/p>\n<h3>Instructional Interactions<\/h3>\n<p>Issuing commands is an example of instructional interactions. Instructional interactions are probably the most common form of conceptual interactions. It allows the user the most control over the system.\u00a0 Specific examples vary form using a VCR to programming. In most cases, issuing commands to the operating system\u00a0(example of &#8220;command line&#8221; interaction style) are instructional interactions. Icons, menus and control keys are examples of improving the usability command line like instructional interaction. Instructional interactions tend to be quick and efficient.<\/p>\n<h3>Conversational Interactions<\/h3>\n<p>The conversational Interaction are \u00a0interactions like user-system dialog. Examples of systems that are primarily conversational are help-systems. Agents (such as the paper clip) use conversational interaction. Implementing conversational model may require voice recognition and text parsing or could use forms. The advantage of conversational model is that it can be more natural, but it can also be a slower interaction. For example, using automated phone based systems is a slow conversational interaction interface. Another disadvantage of conversational interaction is that the user may believe that the system is smarter then it really is, especially if the system uses an animated agent.<\/p>\n<h3>Manipulating and Navigational Interactions<\/h3>\n<p>This model describes the interaction of manipulating virtual objects or navigating virtual worlds. Navigational interactions are popular in computer games. Manipulating interactions occur in drawing software. Navigational interactions occur even in word processors, for example zooming and using the scroll bar. <strong>Direct manipulations<\/strong> are manipulating interactions. Ben Shneiderman (1983) coined the phase and posed three properties:<\/p>\n<ul>\n<li>continuous representations of objects<\/li>\n<li>rapid reversible incremental actions with immediate feedback<\/li>\n<li>physical actions<\/li>\n<\/ul>\n<p>Apple was the first computer company to design an operating system using direct manipulation in the desk top. Direct manipulation and navigational interactions have a lot of benefits. They are easy to learn, easy to recall, tend to have less error, give immediate feedback, and produce less user anxiety. But they have several disadvantages: the interactions are slower and the user may believe that the interaction is more than it really is. Poor metaphors such as moving the icon of a floppy to eject the floppy can confuse the user.<\/p>\n<h3>Exploring and Browsing Interactions<\/h3>\n<p>Exploring and browsing interactions refer to searching structured information. Examples of systems using exploring interactions are Music CDs, Movie DVDs, Web, portals. Also searching for files using window explorer is an example of Exploring interactions. Not much progress has been made in this conceptual model for exploring and browsing interactions, probably because the structuring information is a non\u00a0trivial task and is hard to model.<\/p>\n<h3>Passive Informative Interactions<\/h3>\n<p>Passive Informative interactions are similar to instruments, for example the speedometer in an auto dashboard. They can provide feedback to users&#8217; actions or movements, such as a GPS interface. The can also provide information to changes in the environment such as a light meter or an image in a viewfinder.\u00a0 Smart phones frequently used as instruments and make use of passive instrumental interactions.<\/p>\n<p>Another example of passive informative interaction is using the smart phones to read books. The interaction is very passive and one way. The system is providing information to the users. The user primarily gestures to progress through the book. Viewing images is another passive informative interaction with only interactions for zooming and panning. Passive informative interaction may be a simplified Manipulating and Navigational Interactions.<\/p>\n<p>We can make a table summarize interaction styles and conceptual interaction models. The related conceptual interaction model is the most common model that is supported by the interaction style. Implementation is how hard for the designer to implement. Because I made the table we should go through it and correct it.<\/p>\n<table border=\"1\" width=\"743\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"143\"><b>Interface<\/b><\/td>\n<td valign=\"top\" width=\"90\"><b>User speed<\/b><\/td>\n<td valign=\"top\" width=\"80\"><b>Flexibility<\/b><\/td>\n<td valign=\"top\" width=\"82\"><b>Learning<\/b><\/td>\n<td valign=\"top\" width=\"120\"><b>Implementation<\/b><\/td>\n<td valign=\"top\" width=\"228\"><b>Conceptual Model<\/b><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Command Line<\/td>\n<td valign=\"top\" width=\"90\">fast<\/td>\n<td valign=\"top\" width=\"80\">high<\/td>\n<td valign=\"top\" width=\"82\">slow<\/td>\n<td valign=\"top\" width=\"120\">easy<\/td>\n<td valign=\"top\" width=\"228\">instructing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Menus<\/td>\n<td valign=\"top\" width=\"90\">slow<\/td>\n<td valign=\"top\" width=\"80\">medium<\/td>\n<td valign=\"top\" width=\"82\">medium<\/td>\n<td valign=\"top\" width=\"120\">medium<\/td>\n<td valign=\"top\" width=\"228\">instructing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Dialog<\/td>\n<td valign=\"top\" width=\"90\">slow<\/td>\n<td valign=\"top\" width=\"80\">none<\/td>\n<td valign=\"top\" width=\"82\">fast<\/td>\n<td valign=\"top\" width=\"120\">easy<\/td>\n<td valign=\"top\" width=\"228\">conversing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Forms<\/td>\n<td valign=\"top\" width=\"90\">medium<\/td>\n<td valign=\"top\" width=\"80\">not much<\/td>\n<td valign=\"top\" width=\"82\">fast<\/td>\n<td valign=\"top\" width=\"120\">easy<\/td>\n<td valign=\"top\" width=\"228\">instructing, conversing, browsing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Spreadsheet<\/td>\n<td valign=\"top\" width=\"90\">slow<\/td>\n<td valign=\"top\" width=\"80\">high<\/td>\n<td valign=\"top\" width=\"82\">slow<\/td>\n<td valign=\"top\" width=\"120\">hard<\/td>\n<td valign=\"top\" width=\"228\">instructing, conversing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Point &amp; Click<\/td>\n<td valign=\"top\" width=\"90\">slow &#8211; fast<\/td>\n<td valign=\"top\" width=\"80\">none<\/td>\n<td valign=\"top\" width=\"82\">fast<\/td>\n<td valign=\"top\" width=\"120\">easy<\/td>\n<td valign=\"top\" width=\"228\">instructing, manipulating, browsing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Natural Language<\/td>\n<td valign=\"top\" width=\"90\">fast<\/td>\n<td valign=\"top\" width=\"80\">very<\/td>\n<td valign=\"top\" width=\"82\">slow-fast<\/td>\n<td valign=\"top\" width=\"120\">hard<\/td>\n<td valign=\"top\" width=\"228\">conversing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Command Gesturing<\/td>\n<td valign=\"top\" width=\"90\">fast-medium<\/td>\n<td valign=\"top\" width=\"80\">medium<\/td>\n<td valign=\"top\" width=\"82\">hard<\/td>\n<td valign=\"top\" width=\"120\">hard<\/td>\n<td valign=\"top\" width=\"228\">instructing<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">General Gesturing<\/td>\n<td valign=\"top\" width=\"90\">fast<\/td>\n<td valign=\"top\" width=\"80\">high<\/td>\n<td valign=\"top\" width=\"82\">slow-fast<\/td>\n<td valign=\"top\" width=\"120\">hard<\/td>\n<td valign=\"top\" width=\"228\">manipulating<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"143\">Tangible interaction<\/td>\n<td valign=\"top\" width=\"90\">slow-fast<\/td>\n<td valign=\"top\" width=\"80\">low<\/td>\n<td valign=\"top\" width=\"82\">fast<\/td>\n<td valign=\"top\" width=\"120\">medium to hard<\/td>\n<td valign=\"top\" width=\"228\">manipulating, browsing<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Mobile Interactions<\/h2>\n<p>We will explore the interactions possible in mobile web app via the technologies that enable the interactions.<\/p>\n<ul>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<li>Twitter Bootstrap (as an example of CSS framework)<\/li>\n<li>HTML 5<\/li>\n<li>Various other JavaScript Libraries<\/li>\n<\/ul>\n<h3>HTML<\/h3>\n<p>HTML is the lowest level technology that enables interactions on the web. Basic HTML is very easy to learn, and it has enhanced features. The client browser parses and interprets\u00a0 the HTML so the exact interaction varies with the browser.<\/p>\n<p>A resource for HTML is W3 School.<\/p>\n<p><a title=\"W3 School's HTML Tutorials\" href=\"http:\/\/www.w3schools.com\/html\/default.asp\"><span style=\"font-size: 1rem; line-height: 1.846153846;\">http:\/\/www.w3schools.com\/html\/default.asp<\/span><\/a><\/p>\n<h4>Views and Layout Tools<\/h4>\n<p>The goal of\u00a0HTML is to provide a syntax that is independent of the browser and window dimension, but this can be a challenge. Consequently, HTML only offers the most primitive layout tools. The layout ether flows from left to right for &#8220;inline&#8221; tags or from the top to the bottom for &#8220;block&#8221; tags. Some of the layout tags are<\/p>\n<ul>\n<li>Paragraph tag &#8211; example of section of the page<\/li>\n<li>image tag &#8211; example of non-text layout<\/li>\n<li>Table tags &#8211; advance layout for displaying data<\/li>\n<li>Layout tags &#8211; such as header, nav, section, asside, article and footer. An advance layout for conveying semantic information<\/li>\n<li>IFrame tag &#8211; layout that enable displaying another page within a page<\/li>\n<\/ul>\n<p>The original intention of table tags was to display data as in a spreadsheet. It was not designed to be a layout tool, but for early web development, the table was the way to create advance layouts. Using tables for layout is an awkward syntax, so older HTML editors and IDE focused on making the table tags usable for\u00a0web designers to express layout. The main fault with tables for expressing layout is that the layouts are not very responsive to different window sizes.<\/p>\n<h4>Interactions<\/h4>\n<p>The basic HTML interactions \u00a0consist of links and forms:<\/p>\n<ul>\n<li>Links<\/li>\n<li>Button<\/li>\n<li>Text Fields<\/li>\n<li>Radio Buttons<\/li>\n<li>Check Boxes<\/li>\n<li>Browser Back<\/li>\n<li>Browser Closed<\/li>\n<li>Browser\u00a0URL field<\/li>\n<\/ul>\n<p>The original HTML interaction technique was traversing a link. The link concept of a was developed\u00a0by Nelson (1965) as extension of Bush&#8217;s (1945) Memex description. Originally, the link was a powerful tool to relate documents. Later the link was used\u00a0to initiate an user generated event for the browser to detect.<\/p>\n<p>When messaging boards were developed\u00a0for the web, forms tags were developed. The form input tags include text fields, radio buttons and check boxes. The typical interaction is that the user enters data in the input tags which define the type of data and name it, and then the user click submit which generates a POST request to the server. The form data is a map in the body of the request.<\/p>\n<p>We should also include\u00a0the interactions that the browser offers which include back button, the browser address field and the closing button.<\/p>\n<h3>CSS<\/h3>\n<p>In original HTML, styling were expressed by attributes in the element tags. This made it hard to maintain the style of large websites. To change the style one had to search and edit all the element tags. Cascading Style Sheets or CSS syntax was develop so that style can be expressed\u00a0outside of\u00a0tags and so that the styling can be in one place. Cascading comes from the priority of the styling rules based on the location of the rules: user defined, inline, in the page, or in a separate file. In a file, the priority is lower in the file. Last rule has priority.<\/p>\n<p>CSS can express more than just the style. It can express animation or changes in style for common events such as hovering, clicking etc. A resource for CSS is<\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/css\/\">http:\/\/www.w3schools.com\/css\/<\/a><\/p>\n<h3>Twitter Bootstrap<\/h3>\n<p>Twitter Bootstrap is an example of a css framework. In essence, Twitter Bootstrap is a style sheet with some JavaScript code. Twitter Bootstrap has a very complete style set and was one the first frameworks to be &#8220;mobile first.&#8221; \u00a0CSS frameworks provide consistent styling for all the HTML tags.<\/p>\n<p>The best resources for Twitter Bootstrap is at the official website and W3 Schools.<\/p>\n<p><a href=\"http:\/\/getbootstrap.com\/\">http:\/\/getbootstrap.com\/\u00a0<\/a><\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/bootstrap\/default.asp\">http:\/\/www.w3schools.com\/bootstrap\/default.asp<\/a><\/p>\n<p>For code examples<\/p>\n<p><a href=\"https:\/\/bootsnipp.com\/\">https:\/\/bootsnipp.com\/<\/a><\/p>\n<p>And for free themes<\/p>\n<p><a href=\"https:\/\/bootswatch.com\/\">https:\/\/bootswatch.com\/<\/a><\/p>\n<h4>Views and Layouts<\/h4>\n<p>Besides styling for the HTML, Twitter Bootstrap offers advance views and layouts.<\/p>\n<ul>\n<li>grids<\/li>\n<li>Jumbotron<\/li>\n<\/ul>\n<p>The grid is used to define the responsiveness of the layout, meaning how elements should be laid out for different window widths. A row is a horizontal layout and columns divide the row. The column class defines window width break points for the transition from vertical to horizontal layout. Twitter Bootstrap is &#8220;mobile first&#8221; design, meaning that generally each column is a single row in a small device and the break points define the number of columns for larger window widths.<\/p>\n<p>Jumbotrom is a large display. The name references the Sony&#8217;s original 1985 giant display. The are popular for home page titles and images.<\/p>\n<h4>Interactions<\/h4>\n<p>Besides interactions provided by HTML, Twitter offers some advance interaction widgets.<\/p>\n<ul>\n<li>Navigation Bar (Navbar) &#8211; menu bar can be located at the top (static or fix) or on the side<\/li>\n<li>drop-down menu &#8211; set of links dropping down from menu items or buttons<\/li>\n<li>Notices &#8211; panels that conditional display<\/li>\n<li>Modal &#8211; a window that overlays and holds focus until the user response<\/li>\n<li>Accordions &#8211; collapsing panels<\/li>\n<li>progress bar<\/li>\n<\/ul>\n<p>Navbar enable a menu similar to what user are familiar with in desktop applications. In essence, the navbar help to enable the idea of web apps. \u00a0 The combination of navbar and drop-downs can make the web app have functionality\u00a0similar to\u00a0desktop application.<\/p>\n<p>Modal widows grap focus and force the user to respond. They are good for alerting the user before deleting a database entry. But modal&#8217;s should be used with caution. If you find yourself writing a modal with just one button, I suggest reconsidering your design. A notice might be better or at least have a check box with &#8220;do not show again.&#8221; Modal&#8217;s or overlays are also used to show expanded views. Accordions are good for concealing and revealing detail information in a list.<\/p>\n<h3>HTML 5<\/h3>\n<p>HTML 5 is proposed standards to extend HTML functionality. Many of the proposed standards have already been implemented by \u00a0major browsers. Some of these standards add additional interaction technique via JavaScript.<\/p>\n<h4>Interactions<\/h4>\n<p>The API listed below add interactions techniques to most modern browsers. Google Chrome browser supports all of the API:<\/p>\n<ul>\n<li>Geolocation &#8211;\u00a0<a href=\"http:\/\/dev.w3.org\/geo\/api\/spec-source.html\">http:\/\/dev.w3.org\/geo\/api\/spec-source.html<\/a><\/li>\n<li>Multimedia &#8211;\u00a0<a href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/embedded-content.html#media-elements\">http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/embedded-content.html#media-elements<\/a><\/li>\n<li>Canvas &#8211; <a href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/scripting-1.html#the-canvas-element\">http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/scripting-1.html#the-canvas-element<\/a><\/li>\n<li>SVG &#8211;\u00a0<a href=\"http:\/\/www.w3.org\/Graphics\/SVG\/\">http:\/\/www.w3.org\/Graphics\/SVG\/<\/a><\/li>\n<li>Motion Sensors &#8211;\u00a0<a href=\"http:\/\/w3c.github.io\/deviceorientation\/spec-source-orientation.html\">http:\/\/w3c.github.io\/deviceorientation\/spec-source-orientation.html<\/a><\/li>\n<li>Form Virtual Keyboards &#8211;\u00a0<a href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/Overview.html\">http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/Overview.html<\/a><\/li>\n<li>Touch Events &#8211;\u00a0<a href=\"http:\/\/www.w3.org\/TR\/touch-events\/\">http:\/\/www.w3.org\/TR\/touch-events\/<\/a><\/li>\n<li>CSS 3 Transitions &#8211;\u00a0<a href=\"http:\/\/www.w3.org\/TR\/css3-transitions\/\">http:\/\/www.w3.org\/TR\/css3-transitions\/<\/a><\/li>\n<li>CSS 3 Animations &#8211;\u00a0<a href=\"http:\/\/dev.w3.org\/csswg\/css-animations\/\">http:\/\/dev.w3.org\/csswg\/css-animations\/<\/a><\/li>\n<li>WebGL &#8211;\u00a0<a href=\"https:\/\/www.khronos.org\/webgl\/\">https:\/\/www.khronos.org\/webgl\/<\/a><\/li>\n<li>HTML Media Capture &#8211;\u00a0<a href=\"http:\/\/www.w3.org\/TR\/html-media-capture\/\">http:\/\/www.w3.org\/TR\/html-media-capture\/<\/a><\/li>\n<li>Web Speech API &#8211;\u00a0<a href=\"https:\/\/dvcs.w3.org\/hg\/speech-api\/raw-file\/tip\/speechapi.html\">https:\/\/dvcs.w3.org\/hg\/speech-api\/raw-file\/tip\/speechapi.html<\/a><\/li>\n<li>Vibration API &#8211;\u00a0<a href=\"http:\/\/www.w3.org\/TR\/vibration\/\">http:\/\/www.w3.org\/TR\/vibration\/<\/a><\/li>\n<\/ul>\n<p>The Geolocation API gives access to the GPS even when the browser is offline. Multimedia provides audio and video tags. Motion Sensor gives access to the device&#8217;s accelerometers and consequently can be used to implement the compass and level. Form Virtual Keyboards give mobile devices different keyboards depending on the text field attributes. Touch Events give access to continuous X-Y page and screen coordinates, so can be used to implement drawing and gesturing. HTML Media Capture gives access to the camera in the device so that photos videos can be captures. Web Speech API provides speech recognition and Vibration API vibrates the device, but these are implemented only in Chrome.<\/p>\n<p>Most but not all these APIs are implemented by the major modern browsers, you should check the implementation status at<\/p>\n<p><a href=\"http:\/\/mobilehtml5.org\/\">http:\/\/mobilehtml5.org\/<\/a><\/p>\n<p><a href=\"https:\/\/caniuse.com\/\">https:\/\/caniuse.com\/<\/a><\/p>\n<p>The above APIs give web apps nearly the same functionality of native apps. Some of the interactions are:<\/p>\n<ul>\n<li>GPS Location<\/li>\n<li>Touch<\/li>\n<li>Gesturing<\/li>\n<li>Orientation<\/li>\n<li>Photo<\/li>\n<li>Vibration<\/li>\n<li>2D drawing<\/li>\n<li>3D rendering<\/li>\n<\/ul>\n<h3>Other JavaScript Libraries<\/h3>\n<p>There are many JavaScript libraries that build on the basic features of HTML and HTML5 to provide advance interaction techniques. Below is only a short list of libraries that you may find useful.<\/p>\n<h4>Google Maps API<\/h4>\n<p>Google Maps API is a convenient JavaScript library for displaying maps and map icons. The displays offer user control including locating icons.<\/p>\n<p>The best resources are Google Developers W3 Schools websites:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/maps\/\">https:\/\/developers.google.com\/maps\/<\/a><\/li>\n<li><a href=\"http:\/\/www.w3schools.com\/googleAPI\/default.asp\">http:\/\/www.w3schools.com\/googleAPI\/default.asp<\/a><\/li>\n<\/ul>\n<h4>JQuery and JQueryUI<\/h4>\n<p>JQueryUI is an advance library built on top of the very porpular JQuery library. More than 500 plugins\u00a0widgets (for example autocompletion) offer advance user interface interactions. Below is short list of useful resources:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.w3schools.com\/jquery\/default.asp\">http:\/\/www.w3schools.com\/jquery\/default.asp<\/a><\/li>\n<li><a href=\"http:\/\/jquery.com\/\">http:\/\/jquery.com\/<\/a><\/li>\n<li><a href=\"http:\/\/plugins.jquery.com\/\">http:\/\/plugins.jquery.com\/<\/a><\/li>\n<li><a href=\"http:\/\/jqueryui.com\/\">http:\/\/jqueryui.com\/<\/a><\/li>\n<li><a href=\"http:\/\/learn.jquery.com\/\">http:\/\/learn.jquery.com\/<\/a><\/li>\n<\/ul>\n<h3>Interactions<\/h3>\n<p>We should list interaction techniques available on the smart phones and associate their constraints and opportunities.<\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"173\"><b>Interactions<\/b><\/td>\n<td valign=\"top\" width=\"162\"><b>Opportunities <\/b><\/td>\n<td valign=\"top\" width=\"255\"><b>Constraints\/Difficulties<\/b><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Viewing<\/td>\n<td valign=\"top\" width=\"162\">Any where and time<\/td>\n<td valign=\"top\" width=\"255\">Small screenLow resolution<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Touch<\/td>\n<td valign=\"top\" width=\"162\">Basic input<\/td>\n<td valign=\"top\" width=\"255\">Space for only a few buttons, Small buttons<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Long Touch<\/td>\n<td valign=\"top\" width=\"162\">Context menu<\/td>\n<td valign=\"top\" width=\"255\">User are unaware, requires time<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Gesturing<\/td>\n<td valign=\"top\" width=\"162\">More expression to touch<\/td>\n<td valign=\"top\" width=\"255\">Small spaceLimited gestures<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Keying<\/td>\n<td valign=\"top\" width=\"162\">Text input<\/td>\n<td valign=\"top\" width=\"255\">Small keyboard, Error prone, slow<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Spinner<\/td>\n<td valign=\"top\" width=\"162\">Alternative to text input<\/td>\n<td valign=\"top\" width=\"255\">Only a few selections<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Auto Completion<\/td>\n<td valign=\"top\" width=\"162\">Assist text input<\/td>\n<td valign=\"top\" width=\"255\">Error prone, Complex use<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">GPS location<\/td>\n<td valign=\"top\" width=\"162\">location,documentation<\/td>\n<td valign=\"top\" width=\"255\">Low resolution, 30 meters, Slow<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Orientation<\/td>\n<td valign=\"top\" width=\"162\">Alternative inputprovide direction<\/td>\n<td valign=\"top\" width=\"255\">Noisy, User imprecision<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Microphone<\/td>\n<td valign=\"top\" width=\"162\">Alternative text inputOther inputs<\/td>\n<td valign=\"top\" width=\"255\">Poor quality, Transcription hard and error prone<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Speaker<\/td>\n<td valign=\"top\" width=\"162\">Alternative outputfeedback<\/td>\n<td valign=\"top\" width=\"255\">Poor quality, Inappropriate use in public<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Time<\/td>\n<td valign=\"top\" width=\"162\">Documentation<\/td>\n<td valign=\"top\" width=\"255\">Little use<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">GPS Motion<\/td>\n<td valign=\"top\" width=\"162\">Alternative input, Direction, Area<\/td>\n<td valign=\"top\" width=\"255\">Imprecise, Slow<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Accelerometer Activities<\/td>\n<td valign=\"top\" width=\"162\">Alternative inputMeasure activity<\/td>\n<td valign=\"top\" width=\"255\">Small vocabulary, Imprecise<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Photo<\/td>\n<td valign=\"top\" width=\"162\">Documentation,Vast informationAlternative inputAlternative text input<\/td>\n<td valign=\"top\" width=\"255\">Hard to interpret, Large storage space, Slow<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Vibration<\/td>\n<td valign=\"top\" width=\"162\">Low noise outputDoes not require view<\/td>\n<td valign=\"top\" width=\"255\">Small vocabularyImpreciseUnnoticed<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">WiFi<\/td>\n<td valign=\"top\" width=\"162\">Vast information<\/td>\n<td valign=\"top\" width=\"255\">Slow, Not always available, Small screenLinks hard to touch<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Bluetooth<\/td>\n<td valign=\"top\" width=\"162\">Locale communicationTransfer information<\/td>\n<td valign=\"top\" width=\"255\">Public, Complicate connect protocol, Insecure<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Bluetooth Devices<\/td>\n<td valign=\"top\" width=\"162\">Many opportunities<\/td>\n<td valign=\"top\" width=\"255\">More than one device, Complicated communications<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">\u00a0NF<\/td>\n<td valign=\"top\" width=\"162\">\u00a0Tangible interfaces<\/td>\n<td valign=\"top\" width=\"255\">\u00a0More secure, range 1 meter<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\"><\/td>\n<td valign=\"top\" width=\"162\"><\/td>\n<td valign=\"top\" width=\"255\"><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"173\">Others<\/td>\n<td valign=\"top\" width=\"162\"><\/td>\n<td valign=\"top\" width=\"255\"><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>In general mobile apps frequently use:<\/p>\n<ul>\n<li>Viewing<\/li>\n<li>Touch<\/li>\n<li>Spinners<\/li>\n<\/ul>\n<p>They avoid the using:<\/p>\n<ul>\n<li>Keying<\/li>\n<li>Audio<\/li>\n<\/ul>\n<p>When the opportunity arises, they should make smart use of:<\/p>\n<ul>\n<li>Gestures<\/li>\n<li>GPS location<\/li>\n<li>Orientation<\/li>\n<li>Time<\/li>\n<li>Photos<\/li>\n<li>Vibrations<\/li>\n<li>WiFi<\/li>\n<li>Bluetooth<\/li>\n<\/ul>\n<p>New opportunities for interactions techniques are provided by:<\/p>\n<ul>\n<li>GPS<\/li>\n<li>Accelerometers<\/li>\n<li>Photos<\/li>\n<li>Vibrations<\/li>\n<li>Bluetooth<\/li>\n<li>Bluetooth devices<\/li>\n<li>Near Field<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We will consider human-computer interactions from several perspectives: interaction style user&#8217;s concept of the interaction interactions for mobile devices Human-computer Interfaces Styles Although WIMP interfaces, which are a combination of Menus, dialog boxes, and \u2018point and click,\u2019 currently dominates interface designs there are other forms of interfaces: Command line interface Menus Question-answer\/Dialog boxes Forms Spreadsheets [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":112,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"page-templates\/front-page.php","meta":{"footnotes":""},"class_list":["post-334","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/pages\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":17,"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/pages\/334\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/pages\/334\/revisions\/2115"}],"up":[{"embeddable":true,"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/pages\/112"}],"wp:attachment":[{"href":"https:\/\/cs4760.csl.mtu.edu\/2018\/wp-json\/wp\/v2\/media?parent=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}