Zeeshan Khalid
Book a 30-min callBook a call

Interaction design

Interaction lab

Small, working pieces of product UI where every detail is designed: how it moves, how it answers your touch, and how it works by keyboard and screen reader. Each one follows the principles of universal design. Play with them, then open the design notes to see the thinking behind each one. Everything is simulated, so nothing you do here is measured or sent anywhere.

UI library

14 of 14 widgets

Heart rate

Live

72bpm

Resting range

Resting
58 bpm
Average
72 bpm
Max
72 bpm

Simulated reading for this demo; nothing is measured.

Design notes

Heart rate

A live reading that feels alive: the trace, the number and the heart all move to the same beat.

Try this

  • Watch the digits roll as the reading changes each second.
  • Open the … menu and start a workout, then end it.
  • Pause the live reading and resume it.

Design decisions

  • The trace sweeps like a bedside monitor, with a gap ahead of the pen, so it reads as live rather than looping.
  • The heart icon beats at the measured rate: one signal, shown three ways, all in sync.
  • Digits roll instead of jumping, so a change of one beat is easy to follow.
  • A plain-language label (resting range, light effort) gives the number meaning.

Accessibility

  • The menu works with arrow keys, Home, End and Escape, and focus returns to its button.
  • Screen readers hear the effort label only when it changes, not every second.
  • With reduced motion the trace is a still strip and nothing pulses or rolls.
  • The animation runs only while the widget is on screen.

Universal design

  • Perceptible informationThe rate is shown as a number, a trace, a beating heart and a plain-language label.
  • Low physical effortWith reduced motion the widget keeps working with nothing moving on its own.

Focus

Ready
25 min session

25 minutes remaining

1 of 4 sessions complete

Simulated timer for this demo; nothing runs in the background.

Design notes

Focus timer

A focus timer whose ring drains smoothly and whose main button always shows the next action.

Try this

  • Pick 5 min and press Start.
  • Pause and resume to see the button change colour and label.
  • Open the … menu and skip to the last 10 seconds to see a session finish.
  • Watch a session dot fill when the ring completes.

Design decisions

  • The ring is worked out from a fixed end time, so it moves smoothly and stays accurate if the tab sleeps.
  • Session lengths lock while a session runs, so a stray tap cannot wipe your progress.
  • Start turns into an orange Pause, so the main button always shows what happens next.
  • A menu shortcut skips to the end, so visitors can see completion without waiting 25 minutes.

Accessibility

  • Session length is a radio group with arrow keys, Home and End; every control is a real button.
  • The remaining time is readable on demand but does not tick aloud; completion is announced once.
  • Reduced motion removes the springs, pulse and rolling digits; the ring still updates.
  • Button text meets AA in both themes.

Universal design

  • Tolerance for errorLengths lock during a session, and Reset is a separate, deliberate button.
  • Perceptible informationProgress is shown by the ring, the time and the label together.

Low Tide

Mara Venn

9 likes

Demo player; no audio plays.

Design notes

Music player

A compact player where the artwork, controls and queue respond like a real one.

Try this

  • Press play and watch the artwork lift; pause and it settles back.
  • Drag the progress bar: it thickens under your finger.
  • Press back twice: the first press restarts the song, the second goes to the previous one.
  • Like the song, then open Up next and pick another track.

Design decisions

  • Playing state is shown by the artwork itself, not only by the button, so it reads at a glance.
  • Back restarts the song first, as people expect from their phones.
  • The scrubber has no thumb until you touch it, keeping the card calm at rest.
  • Up next opens in place, so you never lose the song that is playing.

Accessibility

  • Every control is a real button or slider with a clear name.
  • The slider reads as 1:02 of 4:05, not as a bare number.
  • Track changes are announced; play and pause are told by the button's name.
  • Reduced motion removes the springs and the artwork lift.

Universal design

  • Simple and intuitive useControls and behaviour match the music apps people already use.
  • Flexibility in useScrub by dragging or with the arrow keys; pick a song from the queue or skip to it.

Innsbruck

Today, 20:00

4 degrees Celsius

Clear

H:9°L:1°

Simulated forecast for this demo; nothing is fetched.

Design notes

Weather

A forecast where the weather itself is live: rain, snow, stars, sun and clouds move behind the reading.

Try this

  • Pick Friday for rain and Saturday for snow, then Today for a starry night with the odd shooting star.
  • Switch to °F and watch every number roll.
  • Use the arrow keys to step through the days.
  • Watch one weather fade into the next as you change day.

Design decisions

  • Every kind of weather is its own live effect: rain falls at three depths and splashes, snow sways, clouds drift in layers.
  • The days are one segmented control with a sliding pill, so the choice is always clear and close to the thumb.
  • Effects and skies crossfade, so a new day feels like the weather changing, not a new screen.
  • Five days instead of hourly detail keeps the card short and answers the question people ask most: what is the week like?

Accessibility

  • The days are a radio group: one tab stop, then arrow keys, Home and End.
  • Each day reads as one line, such as Thursday, rain, high 17, low 12 degrees, and the choice is announced.
  • With reduced motion the weather is a still picture; the effects also pause off screen.
  • Skies with clouds are darker, so white text keeps 4.5:1 with the clouds drifting behind it.

Universal design

  • Perceptible informationConditions are shown by sky, icon and words together, never by colour alone.
  • Flexibility in useCelsius or Fahrenheit, and days chosen by touch, mouse or keys.

Notifications

Simulated notifications for this demo; nothing is sent. Press Delete on a notification to clear it.

Design notes

Notifications

A notification stack that springs open, clears with a swipe or a button, and always lets you undo.

Try this

  • Tap the stack to spread it into a list, then tap a card to read it in full.
  • Swipe a notification to the left to clear it, then press Undo.
  • Press the X once, then again, to clear everything.
  • Restore the demo from the empty state.

Design decisions

  • The stack and the list are one layout springing between two positions, so each card visibly travels to its place.
  • A short swipe rests open on Clear and a long one clears straight away, so accidental clears are rare.
  • Clear all needs a second press, because one stray tap should not wipe everything.
  • Every clear can be undone for five seconds, and the timer pauses while you are on the message.

Accessibility

  • Every swipe has an alternative: the X on each card, or the Delete key on a focused card.
  • Focus moves to the next notification after a clear, and back to the restored one after Undo.
  • Clears and restores are announced politely; stacked cards stay out of reach until the list is open.
  • With reduced motion, cards appear and disappear without sliding.

Universal design

  • Tolerance for errorUndo after every clear, and a second press before clearing everything.
  • Flexibility in useSwipe, press the X or use the Delete key: three ways to the same result.
  • Equitable useThe gesture and the button are the same feature, not a separate accessible mode.

World clock

Compared with London

Simulated time travel for this demo; the clocks use real time zones. Choose a city to compare the others with it.

Design notes

World clock

A world clock with a time travel scrubber: what time will it be there when it is a certain time here?

Try this

  • Drag the time travel slider and watch every clock spin to the new time together.
  • Tap Tokyo to compare everything with Tokyo instead of London.
  • Find 09:00 in London and see whether New York is still asleep.
  • Press Back to now and watch the hands spring home.

Design decisions

  • One shared scrubber moves all the clocks, because the question is always about two places at the same moment.
  • Small scrubs turn the minute hand the true amount but big jumps take the short way, so the motion explains without a dizzy spin.
  • Light faces by day and dark faces by night show who is awake at a glance, backed by a Day or Night label.
  • The page first shows a fixed time and switches to live time quietly, so nothing flashes or spins on load.

Accessibility

  • The scrubber is a native slider whose value reads the shift and the time, such as 3 hours ahead: 15:00 in London.
  • Each city is one button with a full spoken summary, and the reference city is marked as pressed.
  • With reduced motion the second hand is hidden and the hands move once a minute without springing.
  • Day and night are shown with text and an icon as well as the colour of the face.

Universal design

  • Simple and intuitive useA familiar clock face and a digital time, so people read it whichever way they prefer.
  • Perceptible informationOffset, today or tomorrow, and day or night are written out, not left to the clock face.
  • Low physical effortOne drag answers a time zone question that would otherwise need sums for every city.

Showing 6 of 14

Need a hand?

Make your product feel right.

The difference between a product that works and one people enjoy is in the details: how it moves, answers and recovers. I design those interactions on the principles of universal design, so one product works for everyone, and hand them over as prototypes and specs engineers can build.

Book a 30-min call

Interaction and motion design

  • An interaction review of your key flows and components
  • Motion and feedback principles for your design system
  • Prototypes and specs for the moments that matter most
  • A universal design review: one product that works for everyone, no separate version

IAAP MemberProfessional Member of the International Association of Accessibility Professionals