Category Archives: Week 10

Design Interactions in Telehealth by SimplePractice

Jalyn Marks

Using one of the most common mobile device apps used for telehealth, “Telehealth by simplepractie” as an example, I can start to point out ways in which this is applied. Using some of Shneiderman’s Eight Golden Rules (2016) as an outline, we can explore design interaction and its relevance to culture (specifically, telehealth needs) and accessibility.

Consistency
Every meeting has the same format as an in-person doctor’s visit. Users provide their name, and wait in the “waiting room” before being admitted to the room where the appointment will happen with the specialist, nurse, technician, or doctor.

Universal Usability

I’m always weary when apps claim they have “universal design”, but one feature that contributes to this app’s accessibility is that the doctors’ offices who use this app for telehealth tend not to customize the experience too much on their end. For example, the waiting room for an appointment with, say, my therapist, would look the same as the waiting room for my rheumatologist. This creates a sense of familiarity and comfort for users. They know from experience which buttons to click to enter their appointments.

Feedback
Users can test their microphones/sound and videos while in the waiting room. This allows for the prevention of errors property, as well as for feedback testing on their ends to ensure what they’re seeing matches the doctor’s experience.

Dialogues which yield closure

When meetings end, a button on the bottom of the screen allows patients in Telehealth to “Leave Room.” Even though they are still in the same physical space when the button is clicked, the virtual space is now closed, and it is clear the appointment is over.

Prevent errors

Throughout this course, I think I’ve come to the conclusion that it’s much easier and more effective to design for accessibility at the start, and much harder to add accessibility features to an existing website or technology.

The Telehealth app uses combinatorial aspects of video, audio, and input-output commands that have been set up in the code. It collects data of patients’ name and the date and time of the appointment. It also connects to the calendar feature.

It is unclear to me if this app is as accessible as it could be. However, many of Shneiderman’s Golden Rules seem to account for much of its accessibility.

 

References

“Getting started with telehealth.” (2020). SimplePractice Support. https://support.simplepractice.com/hc/en-us/articles/360001196372-Getting-started-with-Telehealth

Shneiderman, B. (2016) “The eight golden rules of interface design.” University of Marlyland. https://www.cs.umd.edu/users/ben/goldenrules.html

Interaction Design guidelines and principles in YouTube on iOS

I have considered YouTube as a standard mobile device app on an iPhone. It’s interesting to note the design theme that apple requires shapes the way the app is designed. We start, by opening up the phone and looking at the home screen. The home screen is organised using standard sized icons and the youtube icon is designed using two contrast colors of red and white which still stick to the basic guidelines developed to engage user attention by limiting intensity and colour (Shneiderman, 86). Here we notice iOS’s aesthetic requirement of rounded icons, which means there are no sharp edges. This is part of a larger consistent aesthetic that Apple’ would like its app designers to have so that the entire device functions and appears on a similar note. They require app developers to focus on legible text at every size, precise and lucid icons, fluid motion and a crisp interface with transitions to provide a sense of depth. (Themes–IOS Human Interface Guidelines).

The YouTube app necessarily then, has all of these thematic features. The icon is a pixel grid representation enabled by capacitive sensors hidden below the glass surface of the screen. These capacitors have their own electric field which responds to the the tiny electric fields produced by our fingers (Irvine, 9). The grid of wires and electrodes below the top glass detect this and enable the software to recognise where the touch was placed along the X-Y axis of its grid. The software then, via its coding responds by changing the entire pixel grid of the screen (launching of the app).

On opening the app, we see the same guidelines and principles at work as Shneiderman talks about. Interaction Design in YouTube that follows guidelines: We have separate designs to engage user attention and separate designs to facilitate data entry. The bottom icons which we use to engage are small, the text is legible and large, and the smallest icons are to do with settings that we tamper with the least (Themes–IOS Human Interface Guidelines, Shneiderman, 86). All these fit with guidelines of allowing the most useful parts to be the one most prominent ones. In facilitating data entry, youtube provides a search bar, where we can enter natural language text. Since no coding is required and there are abundant filters available, data entry is well facilitated (See image below).

When we look at the interaction design principles in place, we realise that YouTube is built for all three levels of users which means that the affordances they provide have to still be intuitive and yet allow the expert regular user to engage the app without getting bogged down with unnecessary content. One good approach the app has take is that uses visual cues to guide the user instead of mentioning any form of instruction (a principle that many other apps also abide to). Thus we see functions like “tap to play” that are intuitive to novice users, filters in data search for intermediate users and ways to access history and curate content for expert users (Shneiderman, 89) (see below image). Overall its well designed, guided by the apple aesthetic along with its adherence to basic interaction design guidelines. It is still based on principles of engaging with all 3 users ( Shneiderman, 89-90) which makes it a well designed app.

References

Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 6th ed. Boston: Pearson, 2016.

Themes—IOS – Human Interface Guidelines—Apple Developer. (n.d.). Retrieved October 28, 2020, from https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

Tiktok’s path to success – from an interaction design perspective

When it comes to interesting interactive design applications, some think of niche apps with a unique sense of design and sometimes popular apps that can be seen everywhere in our daily life are, in contrast, rarely mentioned. But in fact, the reason for an app being recognized by most users on the market as a popular hit is inseparable from its unique and excellent interaction design.

Let’s take Tiktok/Douyin for an example. If you have ever used Tiktok, you would know that feeling when you thought you were only on Tiktok for five minutes but in fact, two hours had already passed. Thus, there is a popular saying in China that goes, “Five minutes for Douyin, two hours for the world.” According to the 2018 Douyin Research Report, the number of Douyin users is about 150 million. On average, every Chinese uses Douyin 13.5 days a month. In addition, Tiktok, the overseas version of Douyin, has also become one of the most downloaded apps in App Store as well as in the world. In the first quarter of 2018, it surpassed the download and usage data of world famous apps such as Facebook, YouTube, and Instagram. The number of monthly active users exceeds 500 million. As far as interaction design is concerned, the success of Tiktok is not not predictable. Whether it is UI or UX, Tiktok has almost no shortcomings.

Compared with the common waterfall and table-like app UI layouts, Tiktok directly presents a distinctive auto-play and vertical full-screen layout to users. Although this vertical full-screen type is only a different way of visual content presentation, its intuitive, orderly and efficient feedback can, to a large extent, make users feel immersed, which can also make users addicted to the app. At the same time, this way of simulating a first-person perspective also greatly improves the user’s comfort and makes it feel more real for users when using the app. One of the golden rules for interface design from Shneiderman says, “reduce short-term memory load” and Tiktok has done a good job of that.Pareto’s law tells us that everything in the world can actually conform to the 80%/20% law, meaning many outcomes roughly 80% of consequences come from 20% of the causes. There is no need for designers to always meticulously pursue excellences and it is not necessary to provide users with lots of comprehensive information loading because designers should try to avoid problems such as excessive content and fatigue of browsing when facing numerous lists and layouts. Designers should try to find the most critical 20%, and use most of their energy on the core and most critical content, providing a shortcut of greater benefits for most users. Based on the above interactive design considerations and Shneiderman’s golden rule, Tiktok has successfully reduced the user’s acquisition cost without making the users to do any complicated thinking and choices; shortened the steps and distance of operation, and greatly improved the user’s using experience. Therefore, Tiktok’s interaction design has no obvious disadvantages. Its comprehensive consideration in interaction design has largely contributed to the success of Tiktok today.

 

References:

  • Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 6th ed. Boston: Pearson, 2016.
  • Data, Q. (2018, 12 7). 2018 Douyin Research Report released. Retrieved from Tencent Cloud: https://cloud.tencent.com/developer/article/1369825
  • (2020, 10 25). Pareto principle . Retrieved from Wikipedia: https://en.wikipedia.org/wiki/Pareto_principle

Applying the Golden Rules of Interface Design to Popular Video Game: Among Us

Victoria Gomes-Boronat

When doing this week’s reading I couldn’t help but think about how the interface design principles discussed could be applied to the latest trending applications, specifically, the extremely popular video game, Among Us. In prior classes, we have discussed how successful technologies have human-centered designs, and I believe that the success of Among us is largely attributed to its human-centered design. The goal of the application is to become a technological platform for a socially deductive game with rules that are reminiscent of Mafia and Werewolf. It allows users to play a pretty complex game with players around the world which normally wouldn’t be capable of being done on such a large scale. How were they able to digitize a game that is so reliant on human logic and interpretation?

When first entering the application, it becomes obvious as to how the game became successful. Immediately you are confronted with an aesthetically pleasing and directly manipulated interface.

Schnieder explains that using techniques to get the user’s attention is vital to a satisfying interface experience. The start screen marks the various functions within the applications by enclosing them in white boxes. The game is also incredibly popular with old and young users alike because of the simplicity of its design. Schneider states, “Novices need simple, logically organized, and well-labeled displays that guide their actions,” (2006, p. 86).

Once you click on the “How to Play” box, the application pulls up a visual presentation that clearly demonstrates the rules of the game and explains the various roles that players and tasks may have throughout. The use of visuals in the instructions makes it understandable to various age groups. Throughout the game, colors and markers are used meaningfully to indicate various actions and roles. For example, imposters and their actions are marked by the color red. The icons for sabotage, kill, vent, and lock doors are exclusive to the imposter and are colored in red and white. The crewmate’s tasks are colored using green and blue, with the exception of the report button, which is used when a body is found. They also define the roles of the players who have been killed. Players are marked with an X to indicate that they no longer can vote and chat with living players. Ghosts continue to do their tasks, however, they are see through- and can only be seen by other player ghosts.  

Schneider identified 8 Golden Rules of Interface Design, and I believe that the application is so successful because it abides by most, if not all, of the rules (2016, p. 95-97).

  1. Strive for consistency- The tasks, roles, and markers of the game stay consistent throughout all gameplay. There are three maps that can be used with different tasks, however, the tasks for each map do not change or swap. The players can be confident in the consistency of the interface and are therefore able to glean meaning through how other players interact with it. For example, if an imposter is pretending to do a task, but the taskbar does not go up, a crewmate observing can find suspicion in that.
  2. Seek universal usability- The application facilitates the gameplay for all age groups, expertise levels, and international variations. It uses visuals and task demonstrations in order to bridge cultural/language differences. It also allows for customization of gameplay with regards to difficulty in order to appeal to different levels of expertise. It utilizes language censorship in the chat function in order to protect younger players.
  3. Offer informative feedback- when a task isn’t done correctly it will notify the user. If the task is done correctly they will be notified and the taskbar for the crewmates will go up. If there is still a kill cooldown or sabotage cooldown, the icons will not be fully illuminated in order to indicate to the imposter that they may not be able to use that function yet.
  4. Design dialogs to yield closure- There are tasks that must be completed in order within a series. The tasks are identified as completed as you go, for example, once you’ve completed one of the three trash disposal tasks, your tasks list will notify you where the next trash disposal tasks are and that 1/3 are done.
  5. Prevent errors- because of its booming popularity, the servers sometimes encounter errors because of high traffic. To address this, the creators of the app are continually conducting updates and are now planning a second game. They will now be providing a very sought after functionality- voice chat through the application.
  6. Permit easy reversal of action- when typing in a chat you are able to delete and change what you want to say before sending, you are also able to open and close menus with the click of a button.
  7. Keep users in control- because of the consistency of the tasks and platform, the control is entirely in the hands of the players. They interact with the game and must make their own interpretations with regards to other players’ behaviors in the game in order to find the imposter. It is a game of stories, truth-telling, manipulation, and lying in order to win (depending on what role you get). Most of the game is dependant on the players’ analysis of the actions taken by other players.
  8. Reduce short-term memory load- players are afforded a list of tasks and maps of where these tasks can be found each and every game. Many of the tasks are simple and provide demonstrations on how to complete them.

The strength of this application/game is that it provides a strong technical foundation for the exchange of human meaning. The possibilities are endless through the use of human logic and strategy. This was afforded by its human-centered interface design.

 

 

References

Irvine, M. (2019). From cognitive interfaces to interaction design: Displays to touch screens. Unpublished Manuscript.

Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Dikopoulos, N. (2016). Designing the user interface: Strategies for effective human-computer interaction (6th ed). Pearson.

The Direct Manipulation Interface of Target’s iOS App

Mary Margaret Herring

In our readings for this week, Irvine (2019) offers a model of our natural symbolic process cycle. In this model, representations or expressions (like written symbols or patterns of pixels) allow us to make interpretations which are output as actions (Irvine, 2019). In this response, I will be focusing on the representations and understanding how they lead users to interpret the information displayed. To illustrate this, I will use Target’s iOS app as a case study.

Target’s app follows the conventions of a direct manipulation interface to provide a satisfying user experience. Shneiderman et al. (2016) write “the central ideas in such satisfying interfaces, now widely referred to as direct manipulation interfaces, are visibility of the objects and actions of interest; rapid, reversible, incremental actions; and replacement of typed commands by a pointing action on the object of interest” (p. 230). Apple also discusses the importance of direct manipulation interfaces in their Human Interface Guidelines for iOS, stating “through direct manipulation, they [the user] can see the immediate, visible results of their actions.”

The homepage of Target's iOS app

The homepage of Target’s iOS app.

The first principle or attribute of a direct manipulation interface is that objects of interest are visible (Shneiderman et al., 2016). Target does this well by displaying a prominent search bar at the top of the screen. The red color likely draws the users eye there first and invites the user to input text to be shown relevant products. Beneath the search bar sits a “Shop your store” section that demonstrates to users how they can get items from target. This section utilizes icons and short, bold headings to communicate that certain elements may be important to the user without overwhelming them with information. One interesting way that Target uses metaphor to display relevant information to users is by having some of the content boxes go off the screen horizontally (see the “Build your list” div in the “Shop your store” section). This communicates that the user is able to slide the contents of that section horizontally to see other options. By showing the most relevant information first but encouraging the user to see other possibilities, Target successfully reduces the amount of information displayed but encourages the user to investigate the other information there, if it is relevant.

The top bar of the Target app

The nav bar at the bottom of the Target app

The top and bottom of the app. Users can go back by clicking on the left arrow at the top of the screen and can navigate within the app with the options at the bottom of the page.

The second principle or attribute of direct manipulation is that actions should be easily reversible (Shneiderman et al., 2016). The app demonstrates this to users by providing back arrows at the top of most pages and leaving the menu at the bottom of the page constant no matter where the user is in the app. This consistency likely encourages the user to explore other pages of the app but ensures them that there will be a way to get back to a familiar page quickly. However, the app is not consistent in displaying the back arrow at the top of the page. The lack of this widely used convention on some of the pages may leave new or inexperienced users confused when navigating through the site. The site also uses incremental actions to keep the user in control. When shopping by category, the user goes through a number of steps before actually seeing the product. Here is an example search for pet costumes through the categories interface:

The "shop by categories" page in the Target iOS appThe Halloween category page on the Target iOS appThe Pet Costumes category page on the Target iOS appTarget's selection of pet costumesThe product page for pet costumes

This design allows for people who are browsing and once again relies on icons and headings rather than complicated text.

This brings us to the last principle of direct manipulation interfaces: replacement of complex syntax with buttons or icons (Shniederman et al., 2016). I think that the app does a really great job of this overall. There is very little text on the homepage or in any of the product pages. Rather, the app communicates categories of content to the user with icons. The content of the categories pages are broken up into smaller sections where a few categories are displayed using icons and headings and then there is a color advertisement (e.g., Hyde and Eek! Boutique in the sequence of images above). Of course, the user can click on a product to receive more information about it. This way of waiting until a user requests the information reduces the user’s cognitive load and only reveals relevant information.

The representations used in the Target app indicate that the user can either search for relevant products or explore different categories of content. I would be interested to see how many users utilize the “shop by category” feature of the site because that is not something that I would use on a regular basis but it is clear that Target has devoted quite a lot of time into the interface of these sections.


References

Apple. (n.d.). iOS themes. Human Interface Guidelines. https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/.

Irvine, M. (2019). From cognitive interfaces to interaction design: Displays to touch screens. Unpublished Manuscript.

Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Dikopoulos, N. (2016). Designing the user interface: Strategies for effective human-computer interaction (6th ed). Pearson.

Golden Rules of Interface Design

Golden Rules of Interface Design

Yingxin Lyu

First of all , I want to apply some key concepts1 to WeChat application. WeChat application has done a good job in sticking to the eight golden rules of interface design. The first rule is to strive for consistency. WeChat has its theme colors green and white, which are the two color of its icon. Thus, these two colors become important elements to construct the main user interfaces of the app. The background of the user interface is white, and icons at the bottom are green when being chosen and white otherwise. In the chat user interface, the colors of text bubbles of two sides are green and white. Moreover, font design and size are identical according to different functions, and menu style keeps the same in the app.

Secondly, the app is friendly to novice, intermittent users, and experts. The four main interfaces are guided four patent icons at the bottom and they are sequenced by frequency. The most frequently used is chat user interface with a “add” icon at the top of the interface, so a novice can easily find it, add friends, and chat, even if he or she does not discover any other functions. In addition, the chat interface is the same as text interface of smartphones, so users can learn how to use it very quickly. For expert users, the place of each function is fixed and the classification is reasonable and learnable. They can use most of the frequent functions within about three steps.

Thirdly, in the recent year, WeChat offered a new function, that is, users can retract their messages in two minutes. It is the proof that the app tried to permit easy reversal of actions. The new function is very surprising and user-friendly. Sending a text to a wrong person or sending the message with mistakes really make people annoyed anxious, but now WeChat offer users to correct their errors, to retract their mistaken messages, which may be a strong wishes for many people for many years.

The last rule that WeChat sticks to is to reduce short-term memory load. Every picture and video received through WeChat will be downloaded and saved in the phone, so the user only need to download them once, and then they will become long-tem memories. Moreover, pictures and videos shared by friends in Moments will also be download and saved, so it also reduces short-term memory. Thus, the app will occupy a quite big part of smartphone storage after using for years. The prerequisite of saving all these kinds of materials is to click the materials and let the app to down load them, or these materials will be deleted automatically in about three days.

For the second part of the question, I think nowadays touchscreens become a large part among all kind of technologies that carries software and networks because they shortened the translational distances, providing people with chances to have a closer interaction with devices. In the future, the distance will become shorter and lead people to stronger direct manipulation2. People prefer to interact with touchsreens, so designers transfer software controlled by mouse and keyboard to finger controlled one. With various technologies, like pixel map, transparent conductive layers, designers let users’ fingers to take the job of the mouse, causing the situation more and more simulated.

In order to design an interface for users, designers must anticipate users’ behaviors and psychology when communicating with the interface. However, it is impossible to anticipate every possible situation, so designers will make the interface familiar, understandable, and learnable. I still remember my first time using an iPhone, because there were only four buttons, I tried to press tese one until on the screen there showed “slide to unlock the iPhone.” This is a good instruction that guides users to the right way. Now, Apple removed home button, and invented new gestures to use “full screen” iPhones. This time it will be hard for me to try to press the buttons to activate the iPhone, so Apple provides an instruction for new users after their just completing setting up new iPhones. Anyfeature matches interface design rules will make the interface learnable and user-friendly. So I think they are important and practical things that are necessary to learn and keep in mind.

 

References

  1. Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 6th ed. Boston: Pearson, 2016.
  2. Ibid.