Simplifying mobile web design without altering given requirements [closed]

I’m writing and designing a mobile web application where users chat with one another.

This question is about designing a page where each user’s interactions with connected contacts are shown.

This page ought to appear as a vertical list of contacts the user has connected with in the app. Each element in this list ought to give 3 pieces of information:

1) Contact details: name and avatar of the contact

2) Latest interaction: latest interaction of the user with the said contact, alongwith time stamp of the interaction. E.g. “You sent them a message (3 hours ago)”.

3) Status of contact: Last seen timestamp of said contact, alongwith an action button that enables the user to “poke” the contact if they haven’t been online lately.

Currently, here’s how I’ve tried to layout the aforementioned information:

enter image description here

It shows a contact named Hillary alongwith their avatar. It displays the other information required as well.

However, I feel this layout is confusing instead of being seamless. Why? Because conventionally, such pages are meant to funnel users to respective chats via displaying latest interactions.

But in my case, there’s the added wrinkle of displaying the status of the contact alongwith a poke button.

My attempt fails at integrating this wrinkle seamlessly into the design. Specifically, in my attempt, the ‘status’ and ‘poke’ functionality – although neatly separated – commands too much attention; creating confusion or momentary indecision.

I need to minimize this loss of clarity with a more optimized design (given the requirement is staying).

How do I tweak it to produce a design that’s more intuitive instead of cognitively belaboring?

Answers that include illustrative examples are most welcome. If you feel improving this design is impossible given the requirement, that’ll be an acceptable answer too (but please elucidate the reasons with examples, or better yet, suggest alternatives!). Thanks in advance.

Note: although they’re the same in the image I’ve attached, the last seen timestamp and the last interaction timestamp may obviously be different.


Source : Link , Question Author : Hassan Baig , Answer Author : Community

Leave a Comment