1

I'm working on a small project for iOS. I have a page set up where the user can see the current trends from Twitter. Currently my UI looks like this:trends in table

I think this looks rather dull but i cannot think of a better way to do it. Any advice on this would be greatly appreciated.

Improve this question
2
  • Left-aligning the list might give it a little stronger connection to the heading. Other than that, though, I wouldn't overdo it unless there's some piece of information missing that your users will need.
    – Nate Green
    Commented Feb 4, 2016 at 19:56
  • Thank you, i just thought plain text without any images or subtitles looks a little bit bland.
    – Ric Flair
    Commented Feb 4, 2016 at 20:30

2 Answers 2

Reset to default
1

In order to answer your own question, ask yourself how this UI works and dig deeper into what's being communicated to the user.


What does each row do?

The rows' function(s) should dictate their appearance. Are they clickable? Do they do something in the same page or link elsewhere? If they are clickable and navigate to a new page, you might want to indicate that visually.


How does the page work?

Does the header stay fixed while the list says fixed? If so, differentiating the header from the list items will indicate that. As a fringe benefit, it might help make the list look less "bland."


What are the hashtags?

This may seem like a silly question, but it's worth evaluating. Are the hashtags pulled from a subset of all hashtags? If it's valuable to your users to see "trending over t time," category, or geographic scope, you can communicate that somewhere, potentially in each hashtag, or in the header, especially if you have a filtering mechanism.


Additional considerations

From a purely visual design standpoint, left-aligning text like this (in LTR languages) will improve legibility. Adhering to a left-aligned grid will allow you to visual cues for additional functionality in a simpler manner than a center-aligned grid.

It's bad practice to add visual noise. If there's additional functionality, they can reduce the sense that the view is "bland." If there aren't, and visual blandness is something you want to avoid, consider moving this stream into a more complex view. It probably makes sense to style your other inputs before you work on this list. How do buttons and pagination look and work? You can replace "Settings" with the well-understood ⚙ icon. Finally, are there other lists with similar content types in your app? If so, try to design lists as a consistent component.

Good luck!

Improve this answer
2
  • Thank you for your extensive answer. Yes, the rows are clickable and navigate to a detail page, but for me something like a disclosure indicator seems out of place in this context, especially because the rows highlight if you touch them. I also wanted to add a favorite button, so left aligning might work. And for the other buttons like settings, they are currently placeholder and wip.
    – Ric Flair
    Commented Feb 4, 2016 at 21:29
  • My pleasure. Maybe adding a "follow" indication of some kind on the right would allow the user to enable that function without having to open the hashtag. If the whole row is clickable (rather than just the string), blue is a poor color choice because it indicates a link, reducing the user perception of "tappability" on the whole line.
    – SwankyLegg
    Commented Feb 4, 2016 at 23:37
0

Well it looks like all your important information is available in a clear manner to the user.

As for making it less "dull," you could consider using different colors for the text and background. But I don't think there is a problem.

Improve this answer
3
  • Thanks, i tried using a different color for the background but i just can't find one that fits the content and i want this blue-ish color at least somewhere because its the color Twitter uses. Do you have a suggestion for a background and/or text color?
    – Ric Flair
    Commented Feb 4, 2016 at 20:42
  • Well if you want to keep the that same blue color but you want to still change up the design, you could consider reversing the text color and background (white text on blue background).
    – Cynthia
    Commented Feb 4, 2016 at 21:40
  • Tried it already. Too much blue then for my liking.
    – Ric Flair
    Commented Feb 4, 2016 at 22:07

Your Answer

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

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