Concept of an easy to use smart home app with focus on the differences between iOS and Android operating systems.
Smart devices are increasingly part of our everyday lives. These devices are getting better and better and smart home apps are getting easyer, but not simpel enough.
Smart devices are also only as good as their controls
(Key role for user experience)
Forward back and up and down and the same again, is a great thing but only in aerobics class.
(Waste of time)
It’s all too easy to get lost in the forest of smart devices because you can’t see the forest for the trees.
(Clutter)
Do you need Zigbee? No thanks one beer is enough.
(Knowledge)
Despite the smart home being set up, you get up to press the light switch on the wall.
(The path of least resistance)
“Hey Google, all lights off” Ok Google ALL LIGHTS OFF !!!! ….. even the ceiling light!”
(Integration/Compatibility)
Same function, same goal but still differences in operation and habit.
From the socket comes power you plug the plug in to get power but one must turn the plug, the other it does not matter how he plugged him.
If you think about how long you try to plug a 3-pin plug into the socket with two holes until you notice it because you are used to it differently, you can already guess the frustration that can arise.
It must be simple quite clear. Simple to install devices, simple to understand and above all simple to use.
First of all, the solution sounds quite simple.
But any simple and fluid interaction between human and electronic device requires:
The intuitive understanding of what you see and the translation into a function you can interact with.
And interacting even with familiar and expected behavior. Intuitive and self-explanatory.
There are not 16 types of connectors whose differences you have to know, in this case there are 2 operating systems. Apple’s iOS and Google’s Android should be closely examined and known.
iOS: Navigation bar with title, primary action and back functionality in the top right corner.
Android: Built in back functionality in the Bottom Navigation Bar. Hamburger menu in the top right corner. Floating action button for primary action.
iOS: San Francisco / Android: Roboto
iOS: Segmented button bar, instaed of tabs.
Android: The tabs are shown in the form of writing, without any other borders.
iOS: Cards are flat and with rounded edges.
Android: Use shadows for separation and show mostly sharp edges.
iOS: The buttons on iOS have a flat design without shading and are mostly blue.
Android: Android uses different variants, with and without shadows and with motion effects during operation.
iOS: Uses a specific human interface UI for switch buttons. The switch is located inside the container.
Android: Here the switch button is on the container and is also material specific.
iOS: The buttons on iOS have a flat design without shading and are mostly blue.
Android: Android uses different variants, with and without shadows and with motion effects during operation.
iOS: The CTA Buttons are on top, left and right on top by the header.
Android: Android provides buttons for that function. The buttons could include shadows.
iOS: Human Interface guidelines describe that you should always see from where you come and where you can go and therefore does not recommend a hamburger menu.
Android: Material uses as default a hamburger menu always in the upper right corner or in the tab bar.
iOS: Human Interface guidelines uses a different ui and rules like Material.
Android: Material and iOS Menu listen differ from the design.
Gahtering input is a design pattern category that includes everything where user enters information.
This category generally affects any portion of an app that includes lists of information or files. For example: photo galleries, friend lists, or contact books are likely to include data management patterns.
Navigation is intuitive, users are guided through the button bar and other elements, such as arrows at the top.
Social patterns are those which involve interactions between users such as connecting and communicating between friends, reacting (e.g., liking), following, sharing images/articles/statuses and more.
This includes patterns that do not fall into any other category. Some examples are achievements, shopping carts, coupons, pricing, etc.
Knowing the main differences between the two mobile operating systems, you can start developing native apps.
But before you start designing the interface, you should take a look at how other apps solve problems. In doing so, you can learn something, both positive and negative, and possibly apply it to your own design or avoid mistakes in advance.
With the goal to develop a clear and unambiguous interface and the collected knowledge I designed native apps for Android and iOS to achieve the best possible and familiar usability on the different systems.
Fully interactive overview and control of the devices in a room.
If you liked this, check out my other projects
Or just write me if you have any questions or just to say hi.
Smart devices are increasingly part of our everyday lives. These devices are getting better and better and smart home apps are getting easyer, but not simpel enough.
Smart devices are also only as good as their controls
(Key role for user experience)
Forward back and up and down and the same again, is a great thing but only in aerobics class.
(Waste of time)
It’s all too easy to get lost in the forest of smart devices because you can’t see the forest for the trees.
(Clutter)
Do you need Zigbee? No thanks one beer is enough.
(Knowledge)
Despite the smart home being set up, you get up to press the light switch on the wall.
(The path of least resistance)
“Hey Google, all lights off” … “Ok Google ALL LIGHTS OFF !!!! ….. even the ceiling light!”
(Integration/Compatibility)
Same function, same goal but still differences in operation and habit.
From the socket comes power you plug the plug in to get power but one must turn the plug, the other it does not matter how he plugged him.
If you think about how long you try to plug a 3-pin plug into the socket with two holes until you notice it because you are used to it differently, you can already guess the frustration that can arise.
It must be simple quite clear. Simple to install devices, simple to understand and above all simple to use.
First of all, the solution sounds quite simple.
But any simple and fluid interaction between human and electronic device requires:
The intuitive understanding of what you see and the translation into a function you can interact with.
And interacting even with familiar and expected behavior. Intuitive and self-explanatory.
There are not 16 types of connectors whose differences you have to know, in this case there are 2 operating systems. Apple’s iOS and Google’s Android should be closely examined and known.
iOS: Navigation bar with title, primary action and back functionality in the top right corner.
Android: Built in back functionality in the Bottom Navigation Bar. Hamburger menu in the top right corner. Floating action button for primary action.
iOS: San Francisco / Android: Roboto
iOS: Segmented button bar, instaed of tabs.
Android: The tabs are shown in the form of writing, without any other borders.
iOS: Cards are flat and with rounded edges.
Android: Use shadows for separation and show mostly sharp edges.
iOS: The buttons on iOS have a flat design without shading and are mostly blue.
Android: Android uses different variants, with and without shadows and with motion effects during operation.
iOS: Uses a specific human interface UI for switch buttons. The switch is located inside the container.
Android: Here the switch button is on the container and is also material specific.
iOS: The buttons on iOS have a flat design without shading and are mostly blue.
Android: Android uses different variants, with and without shadows and with motion effects during operation.
iOS: The CTA Buttons are on top, left and right on top by the header.
Android: Android provides buttons for that function. The buttons could include shadows.
iOS: Human Interface guidelines describe that you should always see from where you come and where you can go and therefore does not recommend a hamburger menu.
Android: Material uses as default a hamburger menu always in the upper right corner or in the tab bar.
iOS: Human Interface guidelines uses a different ui and rules like Material.
Android: Material and iOS Menu listen differ from the design.
Gahtering input is a design pattern category that includes everything where user enters information.
This category generally affects any portion of an app that includes lists of information or files. For example: photo galleries, friend lists, or contact books are likely to include data management patterns.
Navigation is intuitive, users are guided through the button bar and other elements, such as arrows at the top.
Social patterns are those which involve interactions between users such as connecting and communicating between friends, reacting (e.g., liking), following, sharing images/articles/statuses and more.
This includes patterns that do not fall into any other category. Some examples are achievements, shopping carts, coupons, pricing, etc.
Knowing the main differences between the two mobile operating systems, you can start developing native apps.
But before you start designing the interface, you should take a look at how other apps solve problems. In doing so, you can learn something, both positive and negative, and possibly apply it to your own design or avoid mistakes in advance.
With the goal to develop a clear and unambiguous interface and the collected knowledge I designed native apps for Android and iOS to achieve the best possible and familiar usability on the different systems.
Info circles with information like outside and inside temperature and power consumption
Chip buttons to reach all important areas with one click
Devices are clearly displayed as cards and can be switched on and off. The lamps can be dimmed by swiping over the device card.
Clearly structured interface with components whose function is easy to recognize.
Extra large control element in the optimal area for one-handed operation (mirrorable for left-handers)
Display of lamp position in the room
Select the next device with one click and control it directly without having to return to the main screen.
Buttons for features of the devices are shown and hidden depending on the model and capabilities.
Create an area plan easily and quickly and select the rooms with just one click.
Position devices in the rooms and select them with one click.
Position devices in the rooms and select them with one click.
Fully interactive overview and control of the devices in a room.
If you liked this, check out
my other projects
or just contact me if you have
Smart devices are increasingly part of our everyday lives. These devices are getting better and better and smart home apps are getting easyer, but not simpel enough.
Smart devices are also only as good as their controls
(Key role for user experience)
Forward back and up and down and the same again, is a great thing but only in aerobics class.
(Waste of time)
Do you need Zigbee? No thanks one beer is enough.
(Knowledge)
Despite the smart home being set up, you get up to press the light switch on the wall.
(The path of least resistance)
It’s all too easy to get lost in the forest of smart devices because you can’t see the forest for the trees.
(Clutter)
“Hey Google, all lights off” …..”Ok Google ALL LIGHTS OFF !!!! ….. even the ceiling light!”
(Integration/Compatibility)
Same function, same goal but still differences in operation and habit.
From the socket comes power you plug the plug in to get power but one must turn the plug, the other it does not matter how he plugged him.
If you think about how long you try to plug a 3-pin plug into the socket with two holes until you notice it because you are used to it differently, you can already guess the frustration that can arise.
It must be simple quite clear. Simple to install devices, simple to understand and above all simple to use.
First of all, the solution sounds quite simple.
But any simple and fluid interaction between human and electronic device requires:
The intuitive understanding of what you see and the translation into a function you can interact with.
And interacting even with familiar and expected behavior. Intuitive and self-explanatory.
There are not 16 types of connectors whose differences you have to know, in this case there are 2 operating systems. Apple’s iOS and Google’s Android should be closely examined and known.
iOS: Navigation bar with title, primary action and back functionality in the top right corner.
Android: Built in back functionality in the Bottom Navigation Bar. Hamburger menu in the top right corner. Floating action button for primary action.
iOS: San Francisco / Android: Roboto
iOS: Segmented button bar, instaed of tabs.
Android: The tabs are shown in the form of writing, without any other borders.
iOS: Cards are flat and with rounded edges.
Android: Use shadows for separation and show mostly sharp edges.
iOS: The buttons on iOS have a flat design without shading and are mostly blue.
Android: Android uses different variants, with and without shadows and with motion effects during operation.
iOS: Uses a specific human interface UI for switch buttons. The switch is located inside the container.
Android: Here the switch button is on the container and is also material specific.
iOS: The buttons on iOS have a flat design without shading and are mostly blue.
Android: Android uses different variants, with and without shadows and with motion effects during operation.
iOS: The CTA Buttons are on top, left and right on top by the header.
Android: Android provides buttons for that function. The buttons could include shadows.
iOS: Human Interface guidelines describe that you should always see from where you come and where you can go and therefore does not recommend a hamburger menu.
Android: Material uses as default a hamburger menu always in the upper right corner or in the tab bar.
iOS: Human Interface guidelines uses a different ui and rules like Material.
Android: Material and iOS Menu listen differ from the design.
Gahtering input is a design pattern category that includes everything where user enters information.
This category generally affects any portion of an app that includes lists of information or files. For example: photo galleries, friend lists, or contact books are likely to include data management patterns.
Navigation is intuitive, users are guided through the button bar and other elements, such as arrows at the top.
Social patterns are those which involve interactions between users such as connecting and communicating between friends, reacting (e.g., liking), following, sharing images/articles/statuses and more.
This includes patterns that do not fall into any other category. Some examples are achievements, shopping carts, coupons, pricing, etc.
Knowing the essential differences between the operating systems is necessary to develop a fluid and intuitive user experience on both devices. The additional steps needed to start the development of the app include a logo, colors, competitor analysis:
But before you start designing the interface, you should take a look at how other apps solve problems. In doing so, you can learn something, both positive and negative, and possibly apply it to your own design or avoid mistakes in advance.
With the goal to develop a clear and unambiguous interface and the collected knowledge I designed native apps for Android and iOS to achieve the best possible and familiar usability on the different systems.
Info circles with information like outside and inside temperature and power consumption
Chip buttons to reach all important areas with one click
Devices are clearly displayed as cards and can be switched on and off. The lamps can be dimmed by swiping over the device card.
Clearly structured interface with components whose function is easy to recognize.
Extra large control element in the optimal area for one-handed operation (mirrorable for left-handers)
Select the next device with one click and control it directly without having to return to the main screen.
Display of lamp position in the room
Buttons for features of the devices are shown and hidden depending on the model and capabilities.
Create an area plan easily and quickly and select the rooms with just one click.
Fully interactive overview and control of the devices in a room.
If you liked this, check out my other projects
or just write me if you have questions or just to say hi.
This website uses cookies. By continuing to use this site, you accept our use of cookies.