Websites & patient experience · Practical guide

Make long choice lists usable on a phone

A custom dropdown can be taller than the phone screen or scroll the page behind it. Visitors cannot reach later options or lose the question while searching.

Healthcare website and appointment calendar displayed on devices at an empty clinic reception.
Make the website useful for the people who use your practice.

What to change

Ask your supplier to keep every option reachable and the chosen value clear, including larger text and any search keyboard used inside the list.

A worked example

Illustrative example

A visitor opens a long location list, reaches an entry near its end and returns to the form with the complete selected location visible.

Healthcare website design showing connected desktop and mobile service and enquiry layouts.
Make the service and next step clear on every screen.
Healthcare website accessibility illustrated by a focus outline, keyboard key, contrast samples and form.
Review keyboard access, contrast and understandable form fields.

Why this matters to your practice

Long choice lists need to remain manageable on a small screen. A visitor selecting a branch should be able to reach the final entry, recognise the chosen value and close the list deliberately. Ask your supplier to demonstrate the longest real set of options with larger text. A custom-designed selector carries extra interaction responsibilities, so its appearance alone should not justify replacing a dependable standard control. If search is included, check that the keyboard does not hide the remaining choices or dismissal action.

A practical review example

A location selector may contain enough entries to extend beyond the phone screen. Ask the supplier to reach an option near the end, select it and reopen the list. The current choice should be identifiable and dismissal still available. Watch whether the list or the page behind it scrolls. If search is offered, open the keyboard and repeat. A custom design should earn its place by supporting this complete interaction, rather than replacing a dependable standard selector solely for appearance.

How to check the result

Accept when every option can be reached, selected and verified without unintended background scrolling or a trapped full-screen panel.

A mistake to avoid

Replacing a dependable native selector with a custom panel creates additional interaction behaviour that must be tested explicitly.

Turn reading into a next step

Your action checklist

Work through these checks with your team or supplier. Tick the ones you have resolved and leave unknowns open.

Checks to discuss

Record what you know, what is still missing and the answer you need from your team or supplier.

Use project decisions only, without personal, patient or confidential details. Entries stay in this page and are not submitted to Kay & Co. Copy or download before leaving; this page does not save your notes.

Further reading

These sources provide background for the topic. The practice examples and checklist are illustrative planning suggestions from Kay & Co.

Related guides

Need help with this?

Tell us what is getting in the way. Kay & Co. can help you understand the options and turn the next step into something that works for your practice.

Explore websites & patient experience services or discuss your project.

Try the free Healthcare Digital Planner to find your starting priority.