Designing a scalable interface

How LookUp adapts to the different screen sizes of iPhone and iPad

While designing LookUp 5, one of the most important things that I kept in mind was the scalability of LookUp’s UI from a phone interface to an interface that worked on the iPad’s large screen. It was important that LookUp on the iPad didn’t look like a blown up iPhone app, and so I came up with a layout that would scale between different screen sizes with ease.

Word of the Day

On the iPhone, the Discover screen has smaller margins, one large Word of the Day poster followed by a discover more section that displays smaller posters of previous words of the day, in a two column grid.

On the iPad, however, the margins are greater, the posters are larger and you get a three column grid in the discover more section. More over, given the extra horizontal space, we can actually display the previous day’s word of the day as a large image as well.

Moreover, the grid adapts to the different multi-tasking modes on an iPad as well. So if you’re using LookUp with another app on the side, the UI adjusts accordingly.

Word of the Day Details

If you’re tapping on a word poster, we really want you to experience it in it’s full glory, so regardless of the device you’re on, you see a big colourful image showing you the Word of the Day, followed by a detailed definition of the word, so you can learn more about it.

On the iPhone, the poster and the definitions are stacked one below the other.

On an iPad however, the left side is occupied by the poster, with the definition on the right, making full use of the larger display.

Showing Results on a large screen

On smaller screens, like the iPhone, the word, it’s image, meanings, origins, wikipedia are all stacked one below the other.

On bigger screens, stacking them one below the other leaves a lot of room on either side of the screen, and isn’t necessarily the best reading experience. So, LookUp makes use of the extended horizontal space and creates a two column layout: The left column focuses on the word, actions around it, and it’s image. the right column is all about the definitions, making it easy to read.

Adapting UI elements for different sizes

Apart from scaling the interface, another important aspect of designing a universal app is the process of adapting UI elements according to the screen size.

Adding to Collections

When adding a Word to collections, a popover would feel too cramped on small screen sizes, So it makes more sense to have a slide over card present that layout to the user.

On the iPad, the same UI is presented as a popover, originating from the add to collection button. This UI is more contextually appropriate for the iPad, since popovers are more easily usable on a larger display.

Setting up Smile to Like

One of the ways in which LookUp makes use of the iPhone X’s and iPad Pro’s True Depth cameras is the “Smile to Like” feature. With Smile to Like users just need to smile at the screen to like a particular word.

When adapting this feature for the iPad, one of the challenges was showing the on-boarding screen. On the iPhone, it’s a simple slide over card (like that in the add to collection screen).

On the iPad, Smile to Like takes up the centre of the screen, so your face is in alignment with the camera when setting up smile to like, making sure that it’s just as easy to setup Smile to Like on an iPad. Placing this layout in the same location as that on the iPhone would have resulted in the user’s face looking downwards on the screen, making it difficult for the TrueDepth sensor to recognise a smile. (a key part in the on-boarding for Smile to Like).

Designing for iPad: Going beyond the Interface

Designing for iPad, doesn’t just stop at designing an interface that scales between small and large screen sizes. It’s also about supporting the different accessories that come with the iPad.

LookUp’s a writing companion to a lot of our users, and people who write on the iPad generally do so with the help of a keyboard attachment or bluetooth keyboard. So, it becomes essential for us to have an extensive support for keyboard shortcuts.

Supporting Keyboard Shortcuts

Almost all of LookUp’s actions are accessible through Keyboard shortcuts. You can search for a word, like it, select a word of the day poster for more details, navigate between the different tabs, scroll through the interface all using the keyboard. You don’t need to continuously touch the screen when using LookUp with the keyboard attached.

Context switching is hard, and we know that, LookUp allows you to access the entire interface through the Keyboard.

Changing focus using arrow keys

When scrolling down a tappable list / grid of items, you don’t just want the interface to scroll up and down. You also want the focus to shift to the desired element in the grid, so you can select it with ease. LookUp helps you do that with the help with the help of arrow keys. As you scroll down in LookUp, it shifts the focus to different elements of the grid.

Support for Drag and Drop

Another crucial element of an iPad interface is the ability to drag and drop text to the app, and from the app. So if you want to define a particular word, you can just drag it into the iPad app and get the definition, and if you want to use a particular definition in a different app, just drag it out of LookUp to your desired app.

—

With Universal apps and size classes, the era of a static interface is over. Today, iOS app interfaces need to scale from the smallest screen to something as big as the iPad Pro. LookUp tries to offer an experience that’s just tailored for all these devices, no matter which way you use them.