AV Institute · Week 3Touchpanel & UI Design
Lesson
Touchpanel Screen Layout, Navigation & Accessibility
Est. 60 minCompetency: Lay out screens with clear navigation and accessible controls.
Learning objectives
- Structure a touchpanel into logical screens.
- Design navigation that is obvious and consistent.
- Apply accessibility basics: target size, contrast, labels.
- Avoid hidden state and dead-end screens.
Vocabulary
- Screen
- A single panel page (Home, Sources, Conferencing, Settings).
- Navigation
- How the user moves between screens.
- Target size
- The tappable area of a control; aim ≥ 44px.
- Dead-end
- A screen with no clear way back or forward.
Lesson content
A touchpanel is a small, fixed app. Structure it into a few screens with one clear path between them, and make every control easy to hit and read.
Standard screens for a conference room
- 1Welcome/standby — room status, one big 'Start' button.
- 2Source — choose what to share (laptop, codec, etc.).
- 3Conferencing — join/control a video call.
- 4Volume/audio — level, mute.
- 5Settings/admin — diagnostics, protected.
Navigation rules
- Persistent, consistent nav — the same bar on every screen.
- Always show where you are (highlight current screen).
- Always offer a way back (never a dead-end).
- Keep the most-used action one tap from Home.
Accessibility basics
- Touch targets ≥ 44 × 44 px; more for wall panels at arm's length.
- High contrast between text and background.
- Pair icons with text labels; do not rely on color alone.
- Readable type sizes; avoid all-caps long strings.
- Avoid color as the only status signal (add text or icon).
Accessibility is not optional
Commercial rooms serve a wide range of users. Accessible design (contrast, target size, text labels) is also just good design — it helps every user, not only those who need it.
Worked example
A 7" table touchpanel: Home shows room status and Start; a bottom nav with Source, Call, Volume, Settings; current screen highlighted; every button 48px tall with a text+icon. No screen is more than two taps from Start or End.
Implementation checklist
- ✓Screens limited to the essential few.
- ✓Consistent nav on every screen; current screen marked.
- ✓No dead-ends; always a way back.
- ✓Targets ≥ 44px; high contrast; text + icon labels.
Downloadable study guide
study-guide.txtcopy-paste ready
01. Screens: Welcome, Source, Conferencing, Volume, Settings. 02. Consistent nav, highlight current, never dead-end. 03. Targets ≥ 44px, high contrast, text+icon, not color-only status. 04. Most-used action one tap from Home.