Contacts phones list with description - iOS/Android


#1

Hi guys :slight_smile:

I have an application with Contacts screen where you can find a list of contacts. Each contact could have one number or multiple numbers. In Contacts screen next to the name of each contact I added a call icon and you can press on it to call that contact.
Here is the magic question.

How can I implement the best way to offer you a great experience when you want to select one of multiple phones numbers of contact?

Actual implementation
https://docs.nativescript.org/angular/code-samples/modal-page
Now I use this modal implementation but it looks very strange because on iOS it is full-screen and I can’t change this. The point is I want to change this modal implementation with a better one, the best one.

What I did until now ?
I tried with some plugins like nativescript-fancy-alert or nativescript-cfalert-dialog but :

PROS

  • I would like to use these plugins (just one, not both at the same time) because offer you a better experience on both platforms. It looks similar to iOS and Android.
  • It could be customized and used an entire project for the same experience everywhere in the app.

CONS

  • nativescript-fancy-alert doesn’t have support for alerts with lists in Android
  • nativescript-cfalert-dialog doesn’t have support for alerts with lists in iOS

First idea
https://docs.nativescript.org/ui/dialogs#action


This was my first idea but I can’t customise the content of each option and I’d like to have inside of each option just :

  • phone number
  • type of phone number

If I can’t find any other solution, I’ll implement this idea with this template

07123456789 (work)

as a message of option but I’d like to find a smart way.

My proposal
I found a new action dialog in iOS and I think it would be perfect. It’s about an action dialog like the dialog above but this one has some new features :slight_smile:

This is my best way to make an action dialog in my application but I don’t know how can I do that.

Let me know if we can do that on Android too or if you know something similar to Android.

Thanks in advance for any ideas! :slight_smile:


#2

Ok this is all design opinions, however, if I i’m designing it, I will do the following :

  • RadListview for the contacts

  • Let swipe right and left for the main two actions, like left for making a call and right for sending message

  • list Item hold would, would select the item and give option to delete

  • list item tap, would simulate Accordion view to show for Icons to the main actions. e.g.
    contact

  • when click on details then, will go to the details page where the user can do any actions to any contact number

Personly, I avoid over using modals, alerts … they are quit annoying for the user


#3

Thanks, @ganas for your list :slight_smile: Awesome.
I’ll do some things on your list but my question is :

What happens if the contact has 2 phones number and you swipe left or right?

How can I make it in the best way to select one of the phones of contact?


#4

hmm you should allow the user to set a default, so swipe actions should be perform for the default since they are used for fast action.
however, when the user tap on contact that has more than one number, then in the gif above the number the default number should be above the icons with a small drop down icon, where if the user click it it shows a modal to switch a number or change default.

anyway there are million ways to do it, it all goes back to your taste in ui design