IoT device and UX designer: Importance of understanding hardware for UX designers



Image from


In 2016 IoT(Internet of Things) is not an unfamiliar term: Amazon Echo TV commercial airs on prime time. You can find Nest Protect (smoke alarm) easily at an end aisle of Home Depot. Even if there will be some challenges for IoT to be more mature, as smartphones prevailed our lives in a flash, IoT devices will do.  

In the era of IoT, UX designers will work less on 2D screens. UX designers should focus on not only what is happening on two-dimensional planes, but also hardware and the system itself. In UX Magazine, Claire Rowland, independent product design and UX research/strategy consultant for the Internet of Things (IoT), said, “Designing for the Internet of Things (IoT) raises all the challenges of cross-platform design, and more. 
An obvious difference is the much wider variety of device form factors, many without screens.” Kelly Franznick, founder and chief experience officer at Blink UX in Seattle said, “They(UX designers) need to up their game so they’re as familiar with designing systems that aren’t screen-based.” He mentioned that UX designers may deal with physical models instead of computer-based prototypes, and also emphasized that UX designers will be familiar with tools like Arduino, an open-source a hardware/software package that allows users to build physical devices. In other words, so far UX designers have engaged in user experiences in mobile screen or web pages, but in IoT devices, understanding hardware is essential.

Oftentimes in IoT, the hardware is the user experience. The sensors, processors, and communication modules inside the device determine its purpose and how the user will interact with it. If a device fails to have the right sensors, no amount of pretty design or software will save it. (Alex Brisbourne, 2015) Unlike mobile devices or websites, display area is very limited or sometimes omitted in IoT devices. It’s like each hardware component represents what icons and typography play roles in conventional digital devices.  

Unlike mobile phones or internet websites, IoT devices should consider user experience design at the beginning of the development process. For example, the 2nd generation Amazon Echo Dot has no screen at all. (See image below) It consists or four physical buttons, led lights, microphones, speakers, and USB and headset port. User experience of Echo Dot is determined solely from its hardware. Not many years ago ‘accessories’ of computers or mobile devices tend to depend on engineers or industrial designers. However, what we considered as ‘accessories’ equip with connectivity and is regarded as stand-alone devices, which contain complex functions in one device.

Amazon 2nd generation echo dot does not have display on the device.


Since smartphones and personal computer interfaces are pretty ripened, recently many user experience design tend to focus on better experiences on the devices. However, concepts of UX design can be reinterpreted in IoT devices. User experience design is not limited to software, but it’s time for UX designers to enhance hardware user experiences.


Design Critique: At Bat Android Application

Home At Bat is the official app of Major League Baseball. It delivers real time game information and MLB related stats by text, images, and video clips to users of the mobile app. Even though this app deals with a large amount of data, it is amazingly well organized. Despite its many advantages, At Bat has some UX flaws which need be improved.

1) No player search options

Problem: At Bat contains information of the all players on the roster but it takes a couple of steps to search players. Suppose that users want to search for stats of Carlos Beltran of the Texas Rangers. Currently users first select the team -> scroll down to roster -> select the player manually from the alphabetical ordered list. If users are not aware that he was recently traded from the New York Yankees to the Texas Rangers, they may never find the information they need from this app. From Norman’s viewpoint, there’s no proper interface to use the knowledge in the World. At Bat contains a lot of valuable data but it is unintentionally hard for users to access those data.


Recommendation: For better discoverability, add a search icon on top of the home screen to afford accessing the data, as a cue in the design.



2) No access to team information from the scoreboard

Problem: On the scoreboard screen, when users click a game, it leads to the detail of the game. But when users click the team’s icon or team’s name from the screen, there’s no feedback for the action. If users want to move to the team’s information, there will be a couple of redundant steps to choose a team. When the user clicks the menu icon on the top left, the side menu only shows top 3 favorite teams. In fact, At Bat allows users to choose as many favorite teams as possible but side bar only shows 3 teams. For example, if I want to see information about the New York Yankees (which is not set as my favorite team), I first need to choose one of the teams on the left side menu, a team that is not relevant to Yankees, and then select the Yankees from the drop down menu. There’s a big gulf of evaluation to get to the team information from the scoreboard.


Recommendation: To help bridge the Gulf of evaluation, the app needs proper feedback from either scrolling down side menu to view more teams or clicking each team’s icon on the screen. To implement them, 1) make a team list as an independent scroll-down menu so that users can see the all teams on the left side menu.  2) add link on the teams’ icons.



3) Hard to select & unselect favorite teams

Problem: Setting favorite teams is a key function of this application since this is the default setting of the home screen selection. However, selecting and unselecting favorite teams from the scroll-down team list is not implemented in the app. Long-press, which is basic to Android users to find additional functions, seems to work as seen in the picture below (it changes color to gray as users press it for a while) but there is no feedback from the action. This suggests a bad conceptual model since the long press function in fact does not do anything as users may expect. It’s an example of a bad signifier as well. According to the At Bat FAQ, this is only done in the setting menu, which is located in the bottom of the side menu.


Recommendation: As users use long press on each team’s name, show ‘select’ and ‘unselect’ options on the list. Android users may be familiar with the long-press function intuitively by repetitive experience.