0

I am designing a web app UI (see screenshot below). It has a sidebar, then followed by a row of contacts, where the user can select a contact and make changes to the details and see data about the contact.

enter image description here

This is a banking CMS application. Contact list is accumulated based on opt-ins by customers through phone and email, hence there is no need for a profile picture or customization.

The contacts are used by the bank people to send alerts, info etc. They don't need to see a picture and right now there's no functionality to add profile picture for users, as mostly the list will be an ever changing and ever growing one.

The use case has no use for profile picture as the list of contacts is mainly random customers. Currently I am using name initials as in Google's Android phone contact list. But I still don't feel it's good. I also tried a default placeholder image but it looks boring. How can I make the list more interesting?

TIA for the community.

  • The word 'interesting' can be subject to interpretation. Can yo provide an idea on what you want to try and achieve by making the screen more interesting? Do you feel like this degree of user experience is essential to getting the users to engage more with the application? – Michael Lai Aug 6 at 6:02
  • Totally agree. I either want to use the space of avatar in a more intuitive way so as to let the users (mostly banking people, not tech-savvy) gain more knowledge about a user they are going to select. @Piotr Zak has answered with a couple of insightful links which are shedding some light into this area now. I am still open for more inputs, though. – Johneh Aug 6 at 6:05
  • pasteboard.co/IroFVsm.png Here's the overall UI of this screen. Can you comment your views on it, a general feedback or lessons maybe. Thanks a ton for all your time and inputs. – Johneh Aug 6 at 6:24
  • If your application does not have user photos why do you put those lilac balloons on each user? – Danielillo Aug 6 at 8:21
  • Exactly. I want to make use of that space better or plan B is removing it altogether. – Johneh Aug 6 at 8:50
1

Sometimes there is no need to add functionality without a clear reason. Of course you can add the avatar/icon and introduce the possibility of personalization in the future. If you do not have access to private photos - you can use patterns with a look & feel (like Slack)

More knowledge about avatars in UX:

https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6

What benefits are user avatars offering?

  • 1
    The links were valuable. Thank you. I will try executing some of the ideas. – Johneh Aug 6 at 6:16
  • nice to hear that. I did research, and sometimes it is not necessary to display the avatar. For example, status in realtime applications (available / unavailable) – Piotr Żak Aug 6 at 6:18
  • The list right now has only two filters, for which this idea can be applicable, but later when we have more filters, oh wait, I think we can have 2 primary types from the filter and design the avatar based on that, so the user can have an idea what kind of contact he is seeing. Cool. – Johneh Aug 6 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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