What is a mobile widget?
A widget is an extension of your mobile app that can be displayed, outside of the app, on the home screen of your phone. Both iOS and Android have widgets, and though they have some functional differences, they are essentially a way to display app information and allow basic user interaction without having to be in the app itself.
If you’re a die hard owl minded individual (that is, you love and need as many details as possible) you may not like to hear this, but when designing widgets, leave the details at home. Don’t get carried away with over specifying details. You should work within the device’s native widget structure, which is defined by the OS and subject to change when updates are released. But before we get into that, lets talk Widget 101.
Why are widgets challenging?
When it comes to designing a mobile app there are a lot of great resources available, especially if you’re trying to match some native design patterns. Tools, like Sketch, include built in templates, or you can download UI Kits directly from Apple and Google.
The specs for designing a widget are a little more open ended. If you’re like me, this drives you crazy as you want to mock up EXACTLY what it will look like. Google tells you “roughly” the sizes widgets should be (and yes, they use the word “roughly” in their documentation).
You certainly can assemble an exact mockup, and your customer or stakeholders would probably appreciate that. But, when it comes time to hand off your mockups to the developer, sometimes too much detail will create undesired confusion and an ultimately lousy widget. So, what do they need?
The inception of a widget
Like anything else, the creation of a widget should start with some informed research. Determine what users want and need. Then, determine the information that should be shown, and the flows and actions you want to be enabled. Your widget can deep link to a specific screen of your app, and you can provide multiple actions that take you to different places within your app.
iOS widgets are more limited in their available interactions. You can “show more” or “show less” or tap on objects to link into the app, but you can’t really interact with the widget more than that.
Android gives you more options than iOS. For example, you can resize a widget to take up different cell layouts on the home screen, or you can configure settings, with both of these options allowing you to display different items depending on size and settings. We’ll talk more about this later.
Mocking up your widget on iOS
On iOS this is fairly straight forward. Widgets are all a fixed width, all have the same background, header and general layout. You can take a screenshot and match the padding, or follow the outline below. These specs are based on the first release of iOS 11 and may be subject to change in future revisions, but these should only be used for mockup and should not need to be defined for development.
- App Icon Size: 20×20
- App Name: San Francisco, 13pt, Regular, Uppercase
- Header Height: 36
- Rounded corners: 13
- Collapsed Height: 146 including header
- Show More/Show Less: San Francisco, 13pt, Regular
The rest of what you show in the widget is up to you. I’ve seen custom fonts, maps, images, entire background images, custom icons and buttons. Things you won’t see are text fields or other inputs like checkboxes or radio buttons. But there are clever ways to input information without typing it. For example, Mr. Number is a call blocking app that will alert you to spam/scam calls. You can copy a phone number from your call history, and the widget will pull that number from the clipboard and display it in the widget with information regarding the number’s known blocking reputation. Creative thinking can unlock some cool functions.
Mocking up your widget on Android
Android gets fun, but you must be careful as too much information can cause problems. And I don’t mean showing too much info in the widget, though that could be a problem, but too much info to the developer. With Android, there’s a few key things to make note of.
Sizing for Android
Widgets live on the home screen amongst your app icons. The home screen is structured based on cells. These cells are “roughly 40dp”, as stated directly by Google. They say roughly because different devices can have different cell sizes and layouts.
Your design doesn’t need to take up an entire cell, but as far as Android is concerned it will align it within the specified cells and the blank space remaining can still be tapped on to take the user within the app. If you just want a 20dp tall music player, you can do that, but it will have to be aligned within a 40dp cell and no other widget can occupy that leftover space. If you do want to your widget to take up the entire cell, I recommend specifying to your developers that the widget should “match the parent” size. This way it always perfectly fits the cells, regardless of device. These are great for things like news feeds or message lists.
Widget Resizing for Android
You can enable your widget to be resizable vertically, horizontally or both. If you enable resizing, you can set a minimum number of cells but cannot set a maximum. In theory, you can have a widget that defaults to 3 cells wide by 2 cells tall. If you want to prevent it from being sized smaller, you have that option.
If you want to allow it to be resized larger than 3 cells tall, to show additional information you can do that as well. But, you cannot set the maximum number of vertical cells. The user will be able to then size the widget larger than 3 cells tall. But, just because it’s taking up that many cells doesn’t mean your design needs to take up all of the cell. You can limit your design to roughly 3 cells tall and then just add empty space after that and it’s up to the user to determine if they want to add that empty space or not. Again, another widget cannot occupy that empty space.
When adding a widget, you’ll be selecting it from the widget drawer. The widget drawer will show you thumbnails of the widget at the default size and all show you the cells the default size will use. I recommend setting your best layout size as the default, so it looks the best in the drawer. Some apps make different widgets for different layouts, so they are visible in the drawer, but you can also just have one size showing and the user will be able to resize it when placing it.
Settings for Android
You can add settings to your widget. For example, if you’re displaying emails, when you add the widget you can request which account you want to display. If you’re displaying hourly weather, you can request whether chance or precipitation or wind speed should be displayed. Some widgets only allow this when you add it, while others include a settings icon and allows you to change later.
Interactions for Android
A few basic interactions are allowed with Android widgets. You can tap on items like you can on iOS, or you can scroll lists vertically. You can also long press to be able to resize or move the widget, but that’s built in for every widget.
Design for Android
Now, where iOS is relatively the same for each widget, Android is extremely flexible. You can design it to look virtually however you want. Colors, images, icons, buttons, text, size, etc provide endless opportunity. So if you’re looking for something “native” you can follow similar steps as above and work off a screenshot to determine a native style.
If you’re like me, I was a nervous about designing a widget without the details you thought you needed, that’s ok! I hope you have a better understanding of what a widget can do and how to find the right balance of details without going overboard. Good communication with your developers helps work out the details your team needs. A great thing about our teams here at CRi is we all work closely together and have the environment that allows for good collaboration, open communication, and innovation. This helps us work together and determine the details we all need. For more information, check out Apple’s Human Interface Guidelines and Google’s Material Design and Developer documentation. If you have comments or feedback, lets us know by tweeting at us @CRi_Solutions. For more about our UI/UX practice at CRi check out our User Experience section.