2

I am working on a website for the specific purpose of mobile first display of athlete data for the Highland games and looking for some UX help as far as how to display a large chunk of data with a mobile first approach.

My working prototype is http://nasgame.apphb.com/ Example search would be Matt Vincent, then select the pro result.

For a given Athlete in a class (pro, amateur, women, masters), an athlete will have rankings for 9 events across multiple years, as well as an all time best for each event.

I am working on getting the first column for the 9 events to be a fixed column. The abbreviations are standard for the sport.

A second feature is a flight compare: You pick X number of athletes, and display their all time scores for each of the 9 events. There will frequently be more than 10 athletes being compared at a time, so I'm not sure of the best way to display all of this information.

Improve this question
2
  • 1
    I visited the app on my mobile phone, and I think it already looks very good! For the flight compare, you could use the same layout, replacing the years with athlete names. One thing I would do is make the athletes events clickable, so the athletes will be sorted by their performance in the choosen event.
    – user1261104
    Jun 11, 2014 at 15:53
  • @user1261104 thanks for the feedback! For the flight compare, does anyone have any opinions regarding how to handle the multiple user search? A single textbox and search button that upon search adds the column then clears the search?
    – CGross
    Jun 12, 2014 at 13:51

2 Answers 2

Reset to default
2

For your use case with 10+ athletes by 9 events, the full table might not fit on mobile screens. Generally you want to avoid scrolling left-right but scrolling up/down is OK. Swiping left right or using tabs for each event is a good option if all of your data doesn't fit from left to right beside the athlete names.

You could use tabs or swipe gestures to group by events (assuming it's not important to compare all event scores simultaneously). Examples here:

http://jqueryui.com/tabs/

http://demos.jquerymobile.com/1.3.0/docs/examples/swipe/swipe-page.html

Good luck!

Improve this answer
1
  • Wow, that's a great idea. I wouldn't have thought of that. Let me run it by some other athletes to see what they think! Thank you!
    – CGross
    Jun 29, 2014 at 19:52
1

I understand a mobile first approach as only showing the core necessary details. So first question would be to ask if all the data in necessary to show? What is important to a mobile user? What is the point of the data? Comparison? Trend?

Another tack would be to show a value and represent the rest as differences to that base value. This is particularly useful to condense large numbers with little variation between them. It could be a more meaningful way to represent best and previous scores. ie. instead of

  • current 3min 12sec
  • best 2min 48sec
  • last 3min 14sec

you can have - 2sec faster than last and - 24sec slower then your best or - 23rd in your division of 135 - 12sec behind the lead

Numbers are but one way to represent the data. Consider the degree of accuracy required. A ranking or bar graph may not show exact figures, but may be enough for comparison. With tools such as d3.js web visuals are relatively easy to generate. Use this and other nytimes infographics as inspiration

http://www.nytimes.com/interactive/2012/08/05/sports/olympics/the-100-meter-dash-one-race-every-medalist-ever.html

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.