Table of Content
After all the investigations, I have discovered and discussed possible solutions. In short, there are multiple ways to enhance the understandability of a home automation app. A map layout is worth incorporating to strengthen the interaction between the app and the users. Deep – Smart Home is a Sketch UI Kit which includes 60+ premium iOS screens and 400+ UI elements.
If 360ยบ photo can be composed by any panoramic image, then why can’t we use our smartphone to take a panoramic photo of the house and make it a 3D map? To test this theory I designed another user interface based on the conceptual model of a 3D map. Most home automation apps have multiple pages and elements, so applying signifiers can provide cues on how to optimize the functions and consequently improve the understandability of a user interface.
npm run build
Icons use FontAwesome, and they are provided as an NPM package rather than a CDN to allow for Offline-mode or Mobile Application easier. Single Page JavaScript Application that is simulating house automation controls that allows remote clients to monitor and control home appliances. For the strengths of the experiment, the participants were from different countries and therefore represent a big population. In addition, the control of the confounding variables strengthened the internal validity of the experiment. Part of an awesome home automation UI project, will be uploading more screens soon.
Maps and Floorplans are Pages dedicated to displaying markers and other elements on a background overlay. The component is passed prop onUpdateValue which must be called when the value is changed and it should pass the deviceId and the updated value. Field NameTypeDescriptiondeviceIdintegerThe ID of the devicecontrolIdintegerThe ID of the control to be changed its value.newValueanyThe new value for the control. HTTP-based API interactions are simulated using dummy data in the public/data folder for GET requests and for changing values they are simulated using fake promises that should be replaced with axois PATCH requests. The accuracy rate of the task was calculated by the average percentage of participants that selected the right answer. Similarly, the error rate is calculated by the average percentage of participants that selected the wrong answer.
Home Automation Flat App Design App Design User Interface Design App Interface
773 inspirational designs, illustrations, and graphic elements from the world’s best designers. Sidebar order allows to reorder the sidebar menu, choose an integer for each page on the sidebar, the lower values will make the page higher in the menu. To put a page on the Sidebar, open the Sidebar & Visibility option in a Page's general settings, and enable the Show on Sidebar toggle.
This technology can ‘hide’ some functions under an icon, and the functions would only show up when the user press the icon. As shown in Figure 13, I used an adjustable bar to communicate the device adjustability, and it only shows up when the user presses the icon. After pressing an icon, the user can drag the button left and right to adjust a device, such as turning up the brightness of a light. In this way, a user can optimize a device without even lifting up a finger.
Rooms API
It have components for data presentation and containers for doing Redux API calls. It has Higher-Order-Components that adds extra functionalities for containers like Lazy-Loading, Layout Design and Error Handling. The responses of the second question show that more participants prefer a simple icon to a detailed and realistic icon, and more participants prefer icons with colour to the icons without colours. The above image show the different interfaces that were given to three groups of participants. The participants were asked to try to recognize the icons instead of memorize the icons.
Add the control into the ControlsSwitcher component at src/components/Device/ControlsSwitcher/ControlsSwitcher.js in the switch case to select the component when the type matches. For adding extra rooms, devices and controls, they are retrieved by calling endpoints to get the data from their APIs. UI Architecture uses the "Component Design Pattern" for organizing the code.
Instead, they can simply set some grids into a colour to represent a room and drag accessory icons into the room. By making the entire house into one map, a user can control all accessories without changing pages in the app. To test the idea, I shown this design to people from three countries with a large age range. Surprisingly, even a 70 year old lady without technology background understood its function.
With my design, one can create a 3D image by simply taking a panoramic photo of their house. The photo will be automatically stored and compose to a 3D map. The user can then link the picture of the house with the controls for it. These views are from the same image and can be seen by either tilting the phone, scrolling the image, or adjusting the compass.
For example, based on the background research on 360-photo technology, I came up a disruptive idea of incorporating a 3D map into a home automation app. To test my ideas, I asked people from multiple countries in different age to give opinions. Finally, I did an online experiment with 139 volunteers and analyzed the data to discover the way we interact with icons. A home automation app has multiple pages in its user interface; likewise, each page of its user interface contains multiple icons that represent different smart devices. Unlike traditional devices, smart house devices may have more functions.
All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project. For the experiment, there were some limitations that are worth mentioning. First of all, the sample group of the experiment were mostly high school students. For this reason, the conclusion of the experiment may not generalize perfectly to a wider age range.
No comments:
Post a Comment