SONIFYSPHERE
Listen page · design decision report · 14 November 2026

Which layout makes the sound easy to explore?

Three practical directions for one experience: upload an image or video, move over the media to hear its pattern, inspect the live result, then choose an instrument and save a region sound profile. Each direction is shown on desktop and phone.

Shared rule: show one image or one normal video player. Video analysis happens behind the scenes; no visible frame strip. Audio starts after the person taps Play sound. NASA and marine readings appear only when the source, place, and time support them.
A · GUIDEDStart → Explore → Hear

Clear first use, with a visible next step.

B · CANVASExplore the media

Largest view for tracing a visual pattern.

C · SOUNDChoose a sound profile

Instrument and sound versions take priority.

Choice A

Guided path

Best for a first visit or a classroom demo. The next action is always clear. The media stays central once it is uploaded.

Best first-use clarityDesktop: steps → media → resultPhone: short step label → media → result
Desktop layoutAbout 1280px
Listen / guided
ListenExplore · Saved sounds · AboutSource: uploaded image
User supplied ocean current map used as a layout exampleMOVE OVER THE MAP TO LISTEN
Under your pointer
Visual featureBright green flow
Data sourceImage pixels · no measured value
Hear it as
Glass keysOcean strings
▶ Play sound
Phone layoutAbout 390px
9:41●●● ▰
ListenChange source
STEP 2 OF 3 · EXPLORE THE PATTERN
Map preview in guided phone layoutDRAG TO HEAR THE PATTERN
Under your finger
Bright green flow
Visual feature from the image · no matched marine reading
Glass keysStrings
▶ Play
NextSave sound profile →
SourceExploreSound
Why it is easy to use

Upload, exploration, and sound choice have a visible order. A first-time person sees one task at a time while the result stays directly beside or below the media.

Where it gives up space

The step panel consumes desktop width. On phone, the result and sound controls need scrolling after the media.

Patterns inspected: fal input/result layout, Hume AI setup and analysis, and Alan phone preview with simple completion controls. These are layout precedents; the content and workflow shown here are proposed for SonifySphere.

Choice B

Media canvas

Best for tracing currents or motion in a large visual. The live result is compact and never covers the area under the pointer.

Best for explorationDesktop: large media + right controlsPhone: media + bottom result panel
Desktop layoutAbout 1280px
Listen / canvas
Listen← Sources  ·  ExploreImage 01 / 01
User supplied ocean current map in large canvasGreen flow · high contrastDRAG, HOVER, OR USE ARROW KEYS
Phone layoutAbout 390px
9:41●●● ▰
ListenSource ▾
Map preview in media canvas phone layoutGreen flowDRAG ON THE IMAGE
Live reading
Green flow region
▶ Play
FeatureColor + texture
Marine dataNo matched value
Glass keysStringsMore sounds
ExploreSound profilesAbout
Why it is easy to use

The image or video is the obvious interaction target. The live reading stays close to it, and the sound button is visible without opening another screen.

Where it needs guidance

A new person may not know to drag or hover. Use a one-time “Drag to hear” hint and a sample sound button.

Patterns inspected: Shopify media canvas with right tool panel, Grok spacious media preview, and Instagram phone image with bottom controls. We borrow the arrangement, not the editing tools.

Choice C

Sound profile studio

Best when choosing among instruments and saved variations is the main attraction. The media still reacts live, but sound options take more space.

Best for sound variationDesktop: media + instrument libraryPhone: media + sound picker below
Desktop layoutAbout 1280px
Listen / sound studio
ListenSource: uploaded mapNorth Atlantic · visual profile
User supplied ocean current map in sound studioMOVE OVER A REGION TO CHANGE THE SOUND
Current region
Visual featureBright green flow
Measured marine dataNot matched to this image
Phone layoutAbout 390px
9:41●●● ▰
ListenChange source
Map preview in sound studio phone layoutDRAG TO HEAR CHANGES
Current region
Bright green flow
▶ Play
Visual feature · no measured marine value
Choose a voice
Glass keys · Variant 1▶
Ocean strings · Variant 1▶
More soundsSave profile
ExploreSoundSaved
Why it is easy to use

People can compare sounds with clear names and preview controls. A saved profile records the source, region, instrument, variant, and data provenance.

Where it gets busy

Four sound rows can distract from reading the media. On phone, keep two choices visible and put the rest behind “More sounds.”

Patterns inspected: ElevenLabs composition with variations, Suno generated sound list, and TikTok phone sound picker. Their timeline and editing features are deliberately absent here.

Compare the choices

Pick the experience you want first

LayoutWhat people notice firstPhone behaviorMain tradeoff
A · GuidedThe next stepMedia and a result card in one vertical pathSmaller media view on desktop
B · CanvasThe image or videoLarge media, then a compact result and sound panelNeeds a first-use drag hint
C · Sound studioInstrument variationsMedia, then a short sound picker with more options behind a buttonMore controls compete with the media
My recommendation: choose B, Media canvas as the main Listen page. It makes the uploaded image or video the focal point and works naturally on phone and desktop. Borrow A’s first-use instruction and C’s sound picker as a compact panel. This is a proposal for you to choose, not a change to the live page.
Your decision

Which direction should become the real Listen page?

Select A, B, or C below. Your selection stays in this browser; tell me the letter and I can build that version. You can also ask for a mix, such as “B with C’s sound picker.”

No layout selected yet.

The earlier technical research report still contains the API, sound mapping, haptics, and implementation details. This report focuses on the screen decision.