Can a list follow two different interaction Patterns? In this example I have a list of items. On click of some they open as a link to another page and on click of some, they expand to show a message. Has anyone come across a similar clubbing of two different Interaction patterns?
-
Could you give some more context? What are the items? Does the word "link" and "message" appear?– AlvaroMar 16, 2017 at 14:43
-
Not really. Its just a list of notifications, much like FB and on click, some behave as a link and some expand to show the message. I hope thats helpful in terms of context.– UmaMar 16, 2017 at 14:58
-
Is there a reason for combining them in a single list?– Ken MohnkernMar 16, 2017 at 15:56
-
Is there some form of good visual distinction between the links and the dropdowns?– TheSexyMenhirMay 16, 2017 at 9:55
3 Answers
AFFORDANCES HELP
As you have rightly put a down arrow to indicate an accordion sort of behavior, you could use a similar cue for the links too. This will help the user understand the expected outcome of the click better. See an attached suggestion -
Ignore the UI, but the idea is to provide 'relatively common and well known' visual cues to help user predict the action. Since in your case the link branches out to a internal page - hence depending upon if a new tab is opened or not, you could certainly modify the icon a bit to indicate the same. You could also leverage (for web only), hover actions to indicate these, as applicable.
The answer to your question is YES!
List elements can have multiple types of response, and yes, this is a common pattern. Open settings within iOS to see all sorts of options. And everyone is mostly happy with this. Largely because they have a very clear system of controls and symbols for each type of list element.
Which is the key, if you'll excuse the pun, to solving the problem. Make sure you use appropriate indicators of interaction response and lists can have almost as many response types as you can easily and happily indicate in a communicative way to your users.
I think, it's fair to combine the patterns but group them distinctly.
Look at citi bank for reference: