Blink, iOS highlights

In October, we at Blink introduced highlighting of messages to the web and desktop app. This feature allows users to highlight entire messages or portions of messages that can be re-visited later, this is a particularly useful feature for busy conversations where details might be lost over time. Highlights eliminates the need to scroll back through long conversations wasting a lot of time, future iterations of this feature could include creating to-do lists based on events in the conversation.

The process of highlighting a message on iOS is relatively straightforward, and matches the way in which we allow users to edit, copy or delete messages. Adding the option to highlight the whole message is logical using the action sheet we use now (see below). The difference between the two designs in the centre and right are the message that is highlighted, the design on the right is one of your messages so you can edit it. The only scenario missing is a the removal of the delete message option when you don’t have admin rights in a chat.

Designs for adding a highlight in iOS. The middle option is another user’s message and the right option is your own message.

Initially the scope was limited to web, the release was successful and the feature works well on web and desktop, the next challenge is to make the same feature translate over to our mobile apps, starting with iOS. Having created a direct port of Web highlights to iOS, it was clear that focussed inbox in its current state wasn’t going to work. The designs below show the different levels of navigation needed to get around the inbox with the new highlights added.

Direct port of web & desktop to iOS:

The existing inbox is on the left, with the updated design concepts centre and right.

There is a basic structure to the inbox that is made complicated by the UI patterns used above, firstly, when favourites are added they go to the top of the inbox and are separated by a divider from the rest of your inbox that is structured with latest unread messages at the top. Adding in the highlights tab used on web creates a few problems:

• The amount of vertical space taken up by adding the chats and highlights tabs pushes more messages off the screen.
• There is a clash of UI patterns that add some cognitive load to the user trying to understand exactly where their messages are and the status of those messages. i.e. is it a Favourite, unread, highlighted or has a mention.
• This makes it particularly difficult for a user to work out whether a message is important or not.
• There is a specific inbox setting accessed from the divider with the grey chevron, adding to the load placed on the user.

Based on this design, I wanted to streamline the navigation options so it appeared more cohesive and less fractured. As a result, I looked into adding favourites as a tab across the top of the page below the main iOS navigation. This was intended to show the user a clearer breakdown of their inbox, to show users that it had a more granular make up than just one long list. This was one of the drivers for including focussed inbox to our product in the first place, but now I want to make it work harder for users. This option is included below.

Re-imagined inbox:

From left to right: new inbox with blue tabs, favourites tab selected, same new inbox in a white option.

These designs are still conceptual, but the separation of favourites into its own section makes it far easier to find unread messages and reduces the ‘noise’ of the inbox somewhat. This design also works on the premise that the inbox settings are moved to the general settings page accessible from fifth tab in the main navigation at the bottom of the app screen.

The ‘chats’ tab is now made up of latest chats first, making it more akin to a traditional email inbox. Chats will still show favourites so you don’t have to switch tabs to access unread messages from those chats, they are also marked with a star in the ‘chats’ tab. The inactive favourites tab will still show if there are unread messages associated with those chats with a small read dot with no number once again to try and reduce UI and notification noise.

More questions arise from these designs:

• Should a chat where you are @mentioned always jump to the top of your inbox even if it isn’t the latest unread?
• Are @mentions marked out clearly enough to pick out at a glance?
• Are dividers needed to subdivide the ‘chats’ section of the inbox?
• Should the numbers in the red notifications dots only be used on the main navigation tab and removed from the individual chats?

Aside from the changes to the inbox that the new feature brings, there is the issue of presenting the highlights in the first place. Once again, porting the design straight from the web version presents a challenge. Below are a few of the options explored.

From left to right: same design as web adjusted for iOS, full width message with centred buttons, highlighted messages aligned to the chat title.

Structurally the highlights tab works similarly to the ‘chats’ tab, with the highlights appearing in the order of latest highlight first. There were a few small tweaks made to the UI in the designs centre and right, the date was pulled away from the name and right aligned to make scanning for a date slightly easier. The name and chat title text has also been increased in size. Each of the buttons allow to the user to be able to complete an action straight away without having to select a message first. The rationale for this is basically just to show the user what can be done at all times, recognition over recall, and speed.

Conversely, this might be an issue if a button is pressed accidentally, there isn’t any logic to allow users to undo a change immediately like Google’s UI/UX patterns allow. i.e. if you mark a message as ‘done’ in inbox, the system assumes this isn’t a user error and completes the action, but allows the user to undo the action with a lozenge giving the user the choice to undo that action immediately (see below).

Step by step for marking a message as done, then having the option to undo.

Subsequently this gave me the idea of adding a step to the process of removing or viewing a highlight. Using the iOS action sheet, tapping the highlighted message would bring the action sheet up to hopefully reduce any incident of accidentally removing a highlight or leaving the inbox and going to the conversation where that highlight exists. The balance between allowing users to find the feature or making mistakes is interesting here. The design below illustrates the notion presented.

Action sheet showing the options for viewing the highlighted message and removing them.

The designs show the messages presented similarly to how they would show up in a conversation on iOS, in bubbles, removing the persistent buttons also allow for more highlights to appear on the screen at a time. The messages in bubbles also have a bit more affordance around touching or pressing them to reveal the actions available.

However, this design probably presents a larger effort in build and could add complexity to the feature that doesn’t exist on web and desktop, how important is the consistency of this feature across all platforms compared to what feels right on this platform? A slightly vague question to end on but its quite important nonetheless.

Update:

Having circulated this to the rest of the team at Blink a few more questions arose:

• Should the order of the tabs be changed? Switching to Favourites/Chats/Highlights.
• Should the favourites be duplicated in the chats tab, as well as the favourites one?
• Should the divisions in the inbox that exist today be carried over to the new one. i.e. Unread messages separated from those that are read (see below).

Left; inbox with re-ordered tabs as per feedback. Right; inbox with re-ordered tabs, inbox dividers and the removal of numbers from the unread messages.

Thanks for reading, I hope this provides some insight into my thought processes and the evolution of the design across multiple platforms.

Any comments about the design of the tabs and the new configuration of inbox are very welcome, all of the work is conceptual at the moment but is meant to get highlights into iOS with the best possible design and UX at the moment.