Context
🍏 Apple’s iOS 15 beta offers a revamped Safari experience (1st pic): more space for web & centralised UI.
Though, as always, let’s remain critical of what we are delivered, especially in tech. It helps raising the bar. It only shows some love. I believe several questionable decisions were made:
🔴 Crowded UI
🔴 requires surgical/unnatural precision to edit the URL
🔴 medium URLs are less readable/usable
🔴 UI is now located in a difficult place in regards of mobile heat maps
🟡 Maybe an issue, but something I ❤️: Floating UI instead of edge-to-edge bar!
Interestingly, a floating UI seems to be a first in the history of Apple-made apps whereas FABs (Floating Action Buttons) have always been central to Google’s Android UX.
All-in-all, the approach is similar to that of its 🖥 MacOS counterpart: A minimised UI in favor of more content and did too present similar issues resulting in the update made optional which is perfect:
🟢 Giving control & empowering users is key!
Swell. Now, let’s iterate
I decided to give it a shot, picked up my iPad Pro and jot down ✏️ my own iteration (2nd pic) in an attempt to address the above aliments *without* discarding the general idea. Here goes:
➡️ I kept the « floating UI in the bottom to max out space » idea. It’s great, I ❤️ myself some immersion
➡️ I moved the Tab Button atop. Bear with me: to my mind (enters researcher’s bias 👋!), its purpose regards the “tabs ensemble” as opposed to the rest of the UI which adresses only the current tab. You wouldn’t mix “Files” and “Bookmarks” menus together, would you 🤔? Therefore separating them.
➡️ “Next”: should appear only if there’s a page to go to (Edit: it appears that’s the case already)
➡️ “Share” 📤 : moved to the 3D Touch menu, as per a majority Apple’s / 3rd-Parties’ apps so nothing new, just a tiny adjustment for users 👨👩👦
➡️ ”Refresh”: moved back where it’s always been & looks as prominent as it did in previous iOS or MacOS. Some conventions just shouldn’t change.
The results:
🟢 More air
🟢 URLs have more readability & better interaction design
🟢 A contextualised UI (regarding “Next”)
🟢 “Refresh” has better recognisability which is key in HCI/HMI and cognitive experience
Remarks
Things can be said about the Tab button:
➡️ It’s a 2nd floating components whilst 1 was already pretty alien to iOS design guidelines: Pro/cons to be weighted
➡️ Floating content means layered interface which implies covering content below. The interaction will have to be crafted meticulously, perhaps too much trouble. An allternative could be for exemple: keeping it where it is now but still separated whilst the horizontal scrolling stopping at its left.
➡️ heatmaps tell us corners are difficult to reach for most users
Bonus ⭐️:
Or rather addition remarks:
➡️ I would make the tab button slightly transparent (but still tap-able) when the user scrolls down / is at a stop = it supposedly means they are actively consuming content. (the current iOS’s Safari does it well already, try it). The result is further maximised content & further contextualisation
➡️ I would set it back to normal when scrolling up = it supposedly indicates users are done consuming content so Safari’s UI appears full blown. Same dynamic/context UI benefit.
And lastly:
Dynamism & contextualisation, floating UI & transparency or a combination of the above can vastly hinder some people’s experience: Motor disability, impaired vision, attention deficit and more.
❗️Do not forget Accessibility, practice Inclusive Design❗️
I guess that’s why beta deserves some love, so designs can be challenged constructively.
That’s me, thanks for reading. Do let me know what you think below.
Peace.
Edit 1: My point about “Next” was already implemented in the second waves of Beta versions as seen below
Edit 2: With iOS Beta4’s deployed just now, Safari appears to still be in the works on the very points I mentioned as seen below.
