0

I have a Excel Sheet that I am trying to translate over to web page. The issue I am running into is that if I have a lot of columns that causes horizontal scrolling.

I could also have 100+ rows that display information

For example (not the actual data, thanks to http://www.mockaroo.com): Example

Any Recommendation on how to make UI/UX experience for users easier so it shows them all the information and they can update the data in one page?

Improve this question
3
  • I hope you didn't put actual users' info as an example...
    – Mike
    Commented Mar 31, 2017 at 19:19
  • 1
    its mock data... mockaroo.com
    – jmogera
    Commented Mar 31, 2017 at 19:21
  • Good to hear that. And thank you for the tip on mock data.
    – Mike
    Commented Mar 31, 2017 at 19:29

1 Answer 1

Reset to default
1

I see that the information you need to show about the users can be grouped as following:

  • first and last name (these columns can be concatenated)
  • email address
  • gender - can be shown as a pictogram ♂ or ♀ (or any other understood by the target group)
  • IP addresses (11 entries per user) - can be shown as (editable) drop down, where control decoration appears on hover.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Or you can have a fixed-width text box accommodating e.g 2½ of an IP address with ... (indicating there is more) that expands on click allowing the user to edit the data.

If there are other data types, try grouping them like I described with IP addresses

Improve this answer
2
  • one thing I would need to show is the ipaddress 1- 11 as label. so users know which one they are updating.
    – jmogera
    Commented Mar 31, 2017 at 19:45
  • I've added a mockup - a dialog that appears on clicking on the (truncated) IP addresses list. In fact, each IP should reside in a separate frame.
    – Mike
    Commented Mar 31, 2017 at 20:05

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