How We Created Scalable UI - A Case Study
How We Created Scalable UI - A Case Study
Join the DZone community and get the full member experience.Join For Free
Atomist automates your software deliver experience. It's how modern teams deliver modern software.
I rarely get to write about projects I've been involved with myself so writing this one makes for a pleasant change. For more than a year I've been working as a consultant embedded as a part of a very talented Android design and dev team at Onefootball. Onefootball, an awesome startup based in Berlin, have been developing apps for multiple platforms to bring football (soccer for my American readers) news, statistics and results to their users.
Download the app for free from Google Play
The app is extremely rich with content. The amount of leagues and competitions available to users to browse for is mind boggling. Each of the competitions comes with massive amount of data complete with full season history, match data, team compositions, player statistics for each player and news related to teams and competitions.
From tabs to columnsA lot of the app's content is split into multiple content sections that exist at the same level of the information hierarchy. On a smaller screen the natural component to use is a tab bar. For example the match screen shows things like the match overview, live ticker, line-up and stats.
Each tab's content is created as a flexible screen that spans the width of the screen on most phone sizes.
Tabs to tabs
On other screens with a similar structure we went a different way. This was when the content of the tabs itself was nicely scalable and was able to utilise the available screen real estate.
Many screens like the match screen were perfect for this. The content of each tab was already using card-style layouts and simple reorganising the way the cards are laid out in the screen allowed us to utilise the full screen on larger devices.
In some cases we also adapted the content of the cards to limit the amount of information shown when space is more limited. In this case, for example, the number of teams shown in the competition table is only three when on a smaller screen device and on larger screens we can show more. The full table is only a tap away for the users who want the complete information.
Cards are flexibleIt's not an accident that a lot of Android apps use card-style visuals to show their content. Cards are easily arranged into flexible layouts and scalable UI forms itself nearly automatically.
Content like news articles with rich visuals and mixed sources create a great opportunity to use staggered list-style approach to create visually pleasing, content rich screens.
In some cases simply arranging the cards wasn't possible. If the cards used are different in size and must maintain strict chronological order using a staggered list is not the right way to display them. For us, the solution was to break some of the cards into smaller content components and show them as a grid.
In some cases the smaller screens displayed the content in a simple list while for larger screens we utilised grid-like layouts. This is something Google advises against in the Material Design guidelines but in this case we decided to break from the guidelines as this created the best possible scalable result.
Viewpager is easy to adaptViewpager is a very powerful component. On the team screen we wanted to show recent and upcoming matches.
For smaller screen widths we only show one match and a small slice of the next one to communicate to the users that there's something more just a swipe away.
When there's enough screen width to fit more than one match comfortably we adapt the viewpager to show two or three pages to reveal more information to the user.
On the competition stats detail page we improved navigation between the different stat details on larger screens. Larger screens meant there was empty space on both sides of the list and it felt like a natural place to place quick navigation to the other details pages.
For the competition matchday list we ended up using a dropdown navigation on smaller screens but larger screens have room to show the matchday list on the side allowing user to jump between the matchdays more easily.
USER DELIGHTGoing for good app to a great app requires more than just nice scalable UI. You need to delight your users. In case of Onefootball a lot of details were added to the app to push it from being good to great.
In a football app the right place to start making users delighted is the team page. Onefootball app affords each team a fully themed page. A fan of any team will immediately recognise the colour theme and prominent team logo.
The team page was also improved with subtle but meaningful behaviour. The header of the page transforms into toolbar when scrolled. Lollipop's activity transitions were also spot on for this content. The hero element transition is both delightful as well as helpful.
CONCLUSIONThe Onefootball was great fun. Working with a company that wants to do Android right is rewarding. The results are something I can be very proud to have been part of. Elegant Android scalability can be challenging but approaching it the right way makes it possible to get great results. There are pitfalls but they are avoidable. In our case the app ended up being featured multiple times - most recently as the Editor's Choice in the Google Play Store and in the Google's 2014 Best Apps List.
If you are interested in working with the Onefootball to create the best football app ever made I can wholeheartedly recommend the company. Check out their website for open positions here: http://www.onefootball.com/careers.html.
If your company is interested in getting your app built the right way and pushed to the next level don't hesitate to contact us, at Fat Robot. We can help you. We know how to build Android the right way.
Published at DZone with permission of Juhani Lehtimaki , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.