Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (2024)

We’re back to give you a proper in-depth look at the potential new UI for mobile! Let’s talk about our goals for this rework, and its potential to enhance the player experience – as well as make room for more features in future!

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (1)
Before we begin, please note that the screenshots are taken from one specific mobile device. The spacing between different parts of the interface may vary depending on your device.
Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (2)
Overview

During the Winter Summit at the end of last year, we posted our plans for aMobile Top-Level Interface (TLI) Rework. After the blog came out, we received a lot of positive feedback about its potential – but also some understandable concerns.

It was clear that our blog had failed to really showcase the potential of the new layout, or properly justify our approach from a player perspective. For that, we can only apologise. Going into the holiday period at the end of last year, we didn’t give the time to explain our new design in detail or to address your feedback directly afterwards.

This time, we’re going to give you the FULL breakdown of the design. Not only that, but we’ll be visually showcasing its potential across areas of the game which will be familiar to all of you, from chilled-out activities like Fishing and Pickpocketing to more intensive activities such as The Gauntlet!

By far the most exciting update to this project is that we will havefully functioning Beta Worlds!

Although we had some unforeseen technical difficulties when releasing these worlds for Forestry: Part One, we’re confident in saying that these are in a better place than before!

The team has been able to create Betas as we saw with the recent Desert Treasure II ones, but we’ve never been able to port in content that we are currently working on without worrying about a potential impact on the rest of the game. Now we finally have the opportunity to safely test out things that we’re working on, from Forestry: Part Two to new bosses, and most importantly for this newspost, the new Mobile UI. In fact, this will be the very first thing we use to test out the new Beta Worlds!

You can try out the New Mobile UI Beta onThursday, 17th August.

Before that happens, though, we want to visually demonstrate what the new Mobile UI can do. Further down in this newspost you can find a hands-on preview of The Gauntlet and some Skilling finger-tapping action! You can also expect a livestream onMonday, 21st Augustat17:00 BSTover on ourTwitch channel, where we’ll be addressing FAQs once the Beta is live.

We know how important it is to get this right, especially for those of you that mainly play on mobile. We want to ensure that everyone can get their hands on the Beta – it’s going to take a little getting used to the new style and we’ll want to get your feedback as soon as possible.

We hope you can give us a second chance to unpack why we think this is a good thing for the platform and the future of the game. We want to make the best mobile experience possible!

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (4)
Why ‘Out With The Old’?

Before we jump into the shiny new interface features, let’s break down the current UI, so we’re all up to speed.

Along the left and right sides of the screen, you’ll see something very familiar – the classic OSRS stones. This is where you access all of your side panels, and it’s functionally identical to its desktop counterpart, including the ability to only have one open at a time, with the more important stones appearing higher up on the screen.

In the top-right you’ll find the Minimap, again, identical to the desktop UI, but with the added feature to minimise it via the World Map button, giving you more space. At the top left is the chat, a classic staple and again, very similar to desktop in how it works, but flipped vertically and positioned so that it won’t be obscured by the on-screen keyboard. This can also be minimised by tapping on the currently-selected filter, similar to the side panels. Tapping the speech bubble on the chat line will open up your device’s keyboard to type a message.

There are also a couple of handy utilities like tap-to-drop, which you can find in the function button above the left side stones. On the very right is the newly-added side panel, which functions the same as the Desktop Client – this isn’t enabled by default but contains an XP Tracker, Ground Item Indicator options and the Loot Tracker, with more to come in future.

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (6)
An Opportunity For More

The current UI has lasted four years and arguably worked well enough. But when it comes to adding features that enhance the user experience, we don’t have much room for expansion. We’ve all enjoyed the extra features that third-party clients have provided us for years and we’ve been integrating some of the features into our own client as described above, but in many cases we’ve found the current mobile interface just doesn’t have space for them.

Chat

The chat buttons are pulled straight from the desktop interface. They’re pretty chunky on mobile and cover most of the top section of the screen, which blocks your thumb from tapping far into the distance. Meanwhile the big red ‘Report’ button sits front-and-center above your gameplay, demanding attention. To open the keyboard, you need to tap the tiny speech bubble on the chat line, which is not only unclear but also inconvenient when you accidentally tap it during your adventures.

Function Button

Just below the chat is the function button, which holds some very useful features (most notably, tap-to-drop). Unfortunately, the button isn’t very responsive, subject to that classic ‘lag’ that a lot of buttons in OSRS have, with no visual feedback. Its size also makes it harder to interact with. This would be an excellent place to put new features if we could fix the current issues!

Popout Panel

On the right side of the screen is one of our newest additions: the popout panel, a familiar concept borrowed from RuneLite and beloved by many! Unfortunately, its familiar position doesn’t translate particularly well to mobile, hence why it’s not enabled by default. It takes up the whole edge of the screen, and when open it entirely obscures the Minimap, Orbs and Inventory – arguably the most important features of the whole interface!

Overlays

When activity gets more complicated on screen, things start to go wrong. Imagine, say, you’re in Soul Wars and have opened a clue (just go with it). Our new Clue Helper will open up, but we also need to show you the Soul Wars overlay, your opponent’s HP, stat boosts, buffs, and debuffs. When you open your Prayer panel these overlays need to move out of the way, which means as you change prayers and eat food, these large overlays are jumping all over the place, and almost obscuring the very centre of your screen!

Room for New Features

It’s difficult finding room to add new features. Let’s say you have Ground Item Indicators on, but we want you to be able to toggle that during gameplay, as it can get very cluttered if there are lots of items on the ground. We could add that to the function button, but then we’re sacrificing tap-to-drop – or add it to the popout panel, but then it would require two taps (one of which obscures half the screen). We need a space to add new features, with room to grow in the future.

Visual Consistency

Looking at the whole interface, the visual style is somewhat inconsistent. Take for example the side stones becoming red when selected, while the chat stones invert or some buttons have black outlines such as side stones, while others don’t. The side panel has a rugged-looking border to it, while the Minimap has smooth metallic shading, and the popout panel has a solid rectangular background while the rest of the UI is translucent or appears to be floating. It’s confusing, and just not as sleek and user-friendly as it could be.

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (9)
What’s New?

With all the issues above in mind, we set to work on redesigning the interface. We know there are some pretty major changes here, but we can assure you that they’ve been made while carefully considering all different playstyles.

We’ve also given the UI a new lick of paint, which hopefully keeps the Old School feel while giving the UI consistency and making it more aesthetically pleasing, particularly for new players jumping in. We’d like to see what you think of the new UI design taking everything into account, so let us know how you feel!

Understandably this can be a bit overwhelming alongside that UI design changes, but we hope that we can find a good balance for everyone. With that out of the way, let’s dive into the nitty-gritty of what’s changed and why we want to change it!

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (10)

Click on each image to enlarge them.

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (11)Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (12)Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (13)Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (14)Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (15)Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (16)

Side Stones

One of the biggest changes will affect the most used part of the interface. We’ve moved all of the stones over to the right-hand of the screen. Not only does this provide some consistency in terms of design, but it also stops the overlays from jumping around to avoid the side panels, as they will stay in the same area. This should free up more space for the new features we want to add.

With the new UI, you’ll have all of the familiar stones on the right-hand side, in two separate columns. We’ve made sure that the left column contains those panels you’re going to use across in high-intensity gameplay throughout the game, while the second column will hold features that aren’t necessary for fast-paced action! This also means any interfaces that open due to the panels, such as Inventory, Friends List or Prayer Book, will all now be on the right-hand side. We’ll touch on the benefits of this a little later!

What else? Well, you may have already spotted that the Logout button has moved. We needed to free up one stone for the collapse button, so we settled on the logout button (similar to how the Resizable-Modern layout works on the desktop). It can now be found in the top-left with the reworked chat interface. The top-left of the screen is a typical place to put back buttons or menu buttons in mobile apps, so while it’s a bit strange that it still opens a panel on the other side of the screen, we reckon it’s a reasonable tradeoff.

To help prevent further misclicks – and to give you a little bit more room – we’ve added a handy button that will collapse and hide the second column. This means you can truly focus in the heat of the battle! As a nifty addition, when collapsed, the click area of the side panels is actually wider than the current UI, meaning more accurate tapping. We’ve also added a background to the column, so we can keep the rounded shape of the buttons without any visible gaps between the columns.

One of the biggest feedback points from the original newspost was that you didn’t want to be overloading actions onto your right hand, particularly during intense PvM or PvP encounters. We should have addressed this in our original post, so apologies. Throughout our testing, we’ve found that using the new Hotkeys feature (more on those shortly) spreads out sequential actions alternately between both hands, which makes for faster, more reliable and more comfortable button-tapping goodness!

Let’s take a look at a simple example:

Left hand:Prayer Book →Right hand:Protect from Mage →Left hand:Backpack →Right hand:Range Switch →Left hand:Tap Zulrah

A written example can only do so much, so we’d highly recommend checking out the gameplay videos further down in the newspost to give you a visual representation of both footage from the Mobile Client itself and the perspective of seeing someone’s inputs.

We will preface that it will probably take a little time to re-learn the muscle memory, but we think the overall benefits this and the other features bring are worth it, especially for those of you who mainly play on mobile!

Another feedback point was around a Left-handed version of the UI, which we are open to investigating. However, this is not something we will be able to implement right now.

Hotkeys

Introducing Hotkeys! Previously, we had the small ‘Function’ buttons which appeared above the side stones on the left-hand side. They worked well for the small number of features we had in mind, but they also presented problems in terms of functionality and responsiveness.

Instead, we’ve used the free space to implement five customisable Hotkeys, which can be assigned to a variety of settings and actions. They are very similar to F-Keys found on Desktop, but with a wider array of features which we can also increase over time based on feedback. We can also add brand new features here too.

And speaking of new features, we’re already planning a few that will be very familiar to users of RuneLite, such as tile-highlighting mode and a quick option to toggle ground item names – two features we’ve been unable to fit into the existing UI. That also means adding extra ways for you to do things you’re already used to, like a Special Attack button, Quick-Prayers toggle or Run toggle.

With Hotkeys, you can customise your buttons to exactly your playstyle, or for a very specific activity, making it easier than ever to go between your activities across the game.

You can set up to five Hotkeys here in this menu and most will work by either enabling/disabling the selected feature (like tile-highlighting mode) or opening up to the side stone panels (such as the Inventory, Equipment or even your Music).

As an example, your setup could include having the Backpack and Prayer tiles, for the fastest flow during combat, Ground Items and special attack buttons for convenience during a Slayer Task, or Tap-to-drop during Blast Furnace. Oh, and these buttons are much more responsive than the old function button, with Tap-to-drop and Single-to modes now toggling instantly!

We want to stress that even though the Interfaces of the Side Panels and the panels themselves are all on the right-hand side, the flow of how you play by using the Hotkeys gives a much more comfortable and responsive experience that will benefit everyone!

Popout Panel

For those of you that currently play mobile, you should be very familiar with the new popout panel that was introduced last year! Much like the RuneLite panel, it gives you a lot more features and options like XP Tracking, the newly introduced Ground Item Indicators and Loot Tracking, as well as a number of future additions that we can’t speak about at the moment…

Unlike the current placement of the popout panel, which completely interferes with your gameplay by disrupting your use of the Inventory and other right-hand side panels, the new area sits in the bottom left-hand corner. It also has three separate modes: Hidden, Full and Mini.

  • Hidden: Just a small button to be expanded.
  • Mini: Only showcases one of the panel features in a minimal style; useful to keep track of one specific piece of information without taking up a lot of the screen.
  • Full: A full version that will give you as much information and options as we can fit into that screen. This does obscure the chatbox, but with all the side panels on the right, you’ll still have access to most things.

New Chat

The entire chat interface can now be collapsed using the brand-new toggle button, meaning you’ve got more space to play if you’re going it solo!

However, if you just want one chat channel open without the filters at the top, you can use the ‘Chat Filter’ button to only display the current filter you have in focus, so you can have easy access to those in-depth Clan discussions around the best spot in MLM. With the filters hidden, you’ll also have more lines visible, which not only means you can see more chat, but you’ll also be able to tap further into the distance.

We’ve also replaced the tiny speech bubble with a bigger and easier-to-use keyboard button. It’s been made deliberately small and sandwiched between two relatively unimportant buttons, as we don’t want you to open your keyboard accidentally during high-octane and intense activities. In the future, the chat line will also have clipboard support, caret support and selection support.

To compensate for the horizontal space taken up by the new buttons, the chat area itself has been made slightly narrower – but the whole chat, including the buttons, still takes up the same amount of space as before! You might also notice that all of the buttons down the left side of the screen have the same width. This is to help the interface feel more balanced, and to keep overlays such as health bars and the Clue Helper more stable in position, with the wider buttons being slightly easier to tap, too.

As for that glaring Report button, we’ve tucked it into a long-press option on the chat toggle, so it is not as much of a focus as it was before.

Minimap

There isn’t too much to discuss with the Minimap, aside from us rearranging the minimised version to look cleaner and take up less space! The Wiki button and World Map buttons have also been reworked for visual consistency and easier tapping.

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (23)
A Clearer Look at Mobile

Well, that was a hefty amount of information to throw at you! Like we said at the beginning, one of the biggest misses with the original newspost is not showcasing more videos of the rework, and especially not showcasing content that a lot of you would be familiar with.

From the Rooftop Agility and Pickpocketing to the thrills of The Gauntlet, we’ve put together some showcase videos that will give you a more realistic idea of the feel of the mobile rework. They feature both direct footage of the game and footage from a J-Mod’s perspective – fingers and all!

If you can’t see the video above,click hereto watch – The Hunleff fight begins at 5:45!
If you can’t see the video above,click hereto watch.
If you can’t see the video above,click hereto watch.
If you can’t see the video above,click hereto watch.

A final note: We feel like these improvements to the Mobile UI will make the overall experience better across the game, for everyone. This will also provide us with more room to improve and add more features in the future. Hopefully providing this information now and running a Beta will give you all the opportunity to give us feedback!

This is something that is super exciting and will make a lot more areas of the game more viable for everyone playing on mobile, which is a big win. We’re keen to hear what you all think and look forward to seeing you at the upcoming Beta!

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (24)

You can also discuss this update on ourofficial forums, on the2007Scape subreddit, theSteam forums, or the community-ledOSRS Discordin the #gameupdate channel. For more info on the above content, check out the officialOld School Wiki.

Mods Abyss, Arcane, Archie, Argo, Ash, Ayiza, Boko, Bruno, Chilly, Crystal, Curse, Daizong, Dylan, Ed, Elena, Errol, Fed, Gecko, Gizmo, Goblin, Grub, Halo, Harold, Hend, Hornet, Husky, Jalo, Jerv, Keyser, Kieren, Kirby, Kurotou, Lenny, Light, Mack, Manked, Markos, Maylea, Meat, Moogle, Morty, Necro, Nox, Nylu, Other, Pumpkin, Redfield, Regent, Rice, Roq, Ry, Sarnie, Shroom, Sigma, Skane, Skylark, Sova, Squid, Starry, Stevew, Surma, Sween, Tide, Titus, Torrance, Tsourorf, Tyran, Veda, Vegard, West & Wolfy

The Old School Team.

Mobile UI Rework - Overview & Open Beta - OSRS - Old School Runescape Guides (2024)
Top Articles
Latest Posts
Article information

Author: Frankie Dare

Last Updated:

Views: 5977

Rating: 4.2 / 5 (53 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Frankie Dare

Birthday: 2000-01-27

Address: Suite 313 45115 Caridad Freeway, Port Barabaraville, MS 66713

Phone: +3769542039359

Job: Sales Manager

Hobby: Baton twirling, Stand-up comedy, Leather crafting, Rugby, tabletop games, Jigsaw puzzles, Air sports

Introduction: My name is Frankie Dare, I am a funny, beautiful, proud, fair, pleasant, cheerful, enthusiastic person who loves writing and wants to share my knowledge and understanding with you.