A new concept for the Tesla widget for the next iOS version
The new Widgets
Last Monday, with the start of Apple’s developer conference WWDC20, Apple gave us a sneak peek of the new features that are coming to the next version of iOS (14) that will arrive this fall.
One of the new features presented was, something that a lot of people were expecting, the introduction of widgets on the home screen.
Apple ecosystem already has widgets in all systems, presented a few versions ago, however, it was something with little emphasis and hidden in the “Today View” section.
This year, to give the home screen a revamp, it is possible to add widgets to the home screen, right in the middle of the app’s icons. Of course, in a very Apple way, we will have some limitations: you can only have widgets positioned at the margins, on iPad the widgets are still limited to “Today View” and they can only be developed in three different fixed sizes (small, medium and large).
Watching a more technical presentation (Meet WidgetKit), we learned that a widget should work as a summarised information view of the information that could/should be more valuable for you, from an app.
Once the home screen has been just an app drawer and to avoid big distractions on a screen that the users only use as an intermediate step to reach the desired app, a widget should be Glanceable, Relevant and should allow some Personalization (e.g.: setting a city in the Weather app).
This brings us to the next point. Apple warns us that “these widgets are not mini-apps”, and according to it says:
We do not support scrolling within the widget, interactive elements like switches and other system controls, nor videos or animated images.
https://developer.apple.com/wwdc20/10028 (11m58s)
That “restriction” could lead to a cleaner and more controlled user experience, in an area where it was not possible to interact until now, however, it seems that it is a drawback regarding the previous versions of widgets.
An example of it could be Calculator Pro. Looking at it now, of course, it goes again the guidelines of not being a mini-app. But it could be very handy though.
Tesla
Being a tech enthusiast, a UX designer and a developer, the dream of owning a Tesla is always present in my head. And because of that, I started to wonder how cool could be to have a widget on my *future* phone’s home screen with my *future* car’s data. Not having myself a Tesla and don’t know anybody near me with one, all of the following research was based on web forums, news, and information that I found on Tesla’s website. That said, I kindly ask you that, if you find any error in my research, to get in touch and letting me know what could be missing.
At the moment, Tesla offers a simple widget where the user can see the battery status and interact with a few controllers that let control the climate, lock/unlock the car and open the trunk. All remotely, of course.
Besides that, Tesla costumers can also use third-party apps, like Stats, that let you have more controllers and information in the same form factor.
However, as you can see, both apps have controllers in it and multiple statuses, something that is not allowed by Apple in the new widgets.
According to Apple, the widgets should have instead, touchable areas that lead the user to a specific part of your app, like deep-links. And, in a way to control the available resources of the system, the widgets don’t offer real-time data streams. Is the system, using a few parameters, that determine how often a widget is updated.
The Concept
Following the guidelines and the “technical limitations” imposed by Apple, I created a concept of widget for the Tesla app. Once again, all the information that is shown is based on print screens of the official Tesla app and in the information that is app gave us at this time. Also, this concept is something doable once the information that is shown is something that we can have right now (based on Tesla and Stats app), so, there are already APIs for that.
Using the same color scheme that is present in the Tesla app I created a widget for each possible size available: little, medium, and large.
Small size
The widget on the left represents the placeholder state that appears while the information is loading. Apple suggests the use of content placeholder with the format of the data that is going to be presented, so the user can have an idea about the structure of the information that will appear.
The right one, shows the small widget loaded with data. On top of it, you can see the car’s name and the status of the lock. The car image helps to make the experience more personal and helps to identify the car, more quickly, if the user has more than one Tesla. Below that is shown the battery status, with the mileage that the remaining charge could drive. In the battery graph, the user can see, in blue, the amount of battery used to warm the batteries, if the outside temperature is to low and also, the charge limit (grey line) that the user can already set. It also shows, if the battery is charging, how many times left to achieve the limit.
The option to set the battery status as more important information to show lays on the fact that it can highly impact your driving experience, once, if it is not enough, you are not able to charge it as fast as you can fill a tank with gas, yet.
Medium size
In the medium-size widget, I opted to show the battery status as well but with a little bit more information. In this case, I chose to present more granular information about security and climate, once it is the next level of information that you can get right now in the Tesla app.
However, and comparing with the last version of the widget, you will not be able to turn on/off any controller. In this case, this widget will only help you to ease your mind if you don’t remember if the Sentry mode is on or help you to decide case you are going to use the car soon and want to make it more comfortable before you get in. This type of information is important, but not as important as the battery range (that define the car usage).
Large size
In the large one, we can still see the same information presented in the widgets before but it an extra: the parking location. It could help you when you use to forget where you parked your car, or in case you visit a new city.
Of course, each area could be pressed by the user and each one will lead to a different area from the app.
In the image, I only highlight the different areas between all of the available, but you still get all the previous ones.
Changes from Apple
At this moment, it seems that exists an app, from Apple itself, that don’t follow the guideline of not having controllers, like buttons: Shortcuts.
At the keynote, Craig Federighi showed us his “Today View” with, what seems to be, the Shortcuts widget. Interpreting the image looks that the widget has 4 buttons, and, clicking on them, would run the specific shortcut. It would be counter-productive to open the app just to run the shortcut and then, leave the user there.
This is being discussed by developers here: https://developer.apple.com/forums/thread/650416
It could be something limited to Apple use (like the moving Clock app icon, till now), but changes could happen in the future. Also, something to remember is that changes occur during the beta versions and the final release could be different from what has been presented in the beginning.
I hope you liked the research and concept.
By the way, I’m not a English native speaker and it’s my first Medium post, so, if you find any typo, let me know :)
Resources:
Widgets guidelines: https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/widgets/
Apple Design Resources: https://developer.apple.com/design/resources/
“Meet WidgetKit” video: https://developer.apple.com/videos/play/wwdc2020/10028
WWDC20 Main keynote: https://developer.apple.com/videos/play/wwdc2020/101/
Tesla app: https://apps.apple.com/pt/app/tesla/id582007913
Tesla app support page: https://www.tesla.com/support/tesla-app
Stats for Tesla app: https://www.maadotaa.com
Tesla charging limits: https://acworks.com/blogs/ac-works-connector/tesla-charging-limits-how-to-change-them-and-why-you-should
