Levels
Navigation candidates
Global, local and contextual routes
From sitemap to wireframe
By UXbeam · Information architecture tools since 2021 · Published September 27, 2026
A sitemap gives you structure, not a finished interface. Moving from a sitemap to low-fidelity wireframes means using evidence from card sorting, tree testing or other IA research to choose navigation, screens and layouts, then test the task intent.
EVIDENCE-LED SITEMAPCANDIDATE INTERFACE
Rental marketplace
- 1 Listings
- 2 Listing details
- 3 Application requirements
- 4 Contact landlord
- 2 Listing details
- Saved searches
- Messages
- Settings
1ListingsSavedMessages
2 North apartment
3
Application requirementsIdentity · income evidence · references
1 A branch becomes navigation.
2 A node becomes a screen.
3 Task evidence informs placement.
4 An action becomes a control.
The four translations
At UXbeam, we use four lenses to carry evidence-led IA into interface design: levels, nodes, siblings, and research evidence. Evidence can influence every later decision, from navigation to placement.
FROM THE SITEMAPINTO THE INTERFACE
Nodes
Screen, section, or control
Decide what needs a destination and what belongs within one
Siblings
Layout candidates
Arrange items for recognition, comparison or browsing
Research evidence
Priority and placement hypotheses
Try a placement, preserve its rationale, then test
One sitemap can support several candidate interfaces.
1. Put the evidence on one sheet
Record what participants did before interpreting why. Bring groupings and labels from card sorting, paths and outcomes from tree testing, or findings from other IA research. Tie every proposed change to the observation it is meant to address.
Rental marketplaceEvidence sheet
OBSERVATION→INTERPRETATION→CANDIDATE DESIGN MOVE
T1 · Landlord responsiveness
ObservationThe task path ends in Messages.
InterpretationThat path suggests response information belongs closer to the conversation.
Candidate moveTry response information in Messages and on the listing.
T2 · Search alerts
ObservationChoices split between saved searches and notification settings.
InterpretationParticipants may treat the saved search and its notification settings as two entry points to the same task.
Candidate moveTest whether one route should cross-link to the other.
T3 · Application requirements
ObservationThe task path ends at the listing description.
InterpretationRequirements may be expected alongside the home being considered.
Candidate moveTry a requirements section on the listing.
For tree-testing evidence, keep the original task wording, valid destinations, direct / indirect results, paths, and denominator with the evidence sheet.
2. Interpret nodes with the Node Translator
What does this node represent? Use its type to narrow candidate layouts, then choose using the task and the content.
Use these node types as a practical way to narrow layout options. Types can overlap; empty states are handled separately because they describe a condition of a view.
Hub
A place whose main job is routing people to related destinations.
Are the destinations peers, or does one task need more prominence?
A parent node can be a hub without becoming a separate landing screen.
Destination cards
Works well when distinct destinations need a clear starting point.
Rentals
Your rental search
ListingsFind your next home
Saved searches
Messages
Requirements
Priority hub
Works well when one starting task deserves emphasis while other destinations remain accessible.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Collection
A set of comparable items people browse, scan, search, or filter.
Do people recognize items visually, or compare their attributes?
Filtering favors a catalog or list. Exploratory feeds may suit progressive loading.
⌂ RentalsListings
Find your next home3 listings
North apartment1 bed$1,400
Garden studio1 bed$1,100
Riverside home2 beds$2,000
Visual grid
Works well when visual recognition helps someone choose an item.
⌂ RentalsListings
Find your next home3 listings
Max. rent: any ⌄Bedrooms: any ⌄☷
North apartment1 bed$1,400
Garden studio1 bed$1,100
Riverside home2 beds$2,000
Filtered list
Works well when constraints help narrow a collection before comparing attributes.
CHOOSE BASED ON
Comparison needs · visual recognition · attributes · collection size
Object
One thing with attributes and related objects, such as a rental listing.
What must be read together? Which related objects should be reachable here?
An object can appear in several contexts. Use tabs when sections are meaningfully distinct, not simply because the page is long.
Stacked detail
Works well when related information needs to be read together.
Tabbed detail
Works well when distinct sections can be visited separately.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Process
An activity with steps, decisions or dependencies.
Must these steps happen in order? Can someone pause or revisit them?
A verb label does not make something a process; the task needs steps, decisions, or dependencies.
Stepped flow
Works well when dependencies make an ordered sequence useful.
Form
Works well when the required inputs can be understood in one view.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Place
A location or area whose spatial relationships matter to the task.
Does seeing proximity help people decide, or is an address enough?
A map can accompany a list; location data does not require a map-only interface.
Listings
1North apt.$1,400
2Riverside$2,000
Map + list
Works well when proximity or spatial relationships affect the choice.
Listings
ListingsRentBeds
North apartment
$1,4001
Garden studio
$1,1001
Riverside home
$2,0002Attribute list
Works well when attributes need to be scanned across items.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Conversation
An exchange of messages and its surrounding context.
Does the reader need to compare threads, or focus on one exchange?
Use conversation patterns when the exchange itself is the task; otherwise treat support as content or a workflow.
Conversation
Works well when the exchange is the main task.
List + detail
Works well when detail and a choice of items need to stay in view.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Workspace / settings
A working area or a set of controls for a product or object.
Which views must stay visible together? Which settings belong to one object?
Workspaces often keep several working views visible; settings usually group controls around one object or account.
Sidebar
Works well when persistent access to sections supports the task.
Multi-panel
Works well when several working views need to remain visible together.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Action
Something a person can do in a particular context: add, share or contact.
Where is the action relevant, and what information is needed before taking it?
Consider an inline control, toolbar or persistent action. Use a modal for a bounded interaction, not as a substitute for navigation.
Contextual action
Works well when the next action belongs to the current object.
Form
Works well when the required inputs can be understood in one view.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Stream
An ordered sequence of events, updates or activity.
Do dates and sequence help the task? Must people find an older entry again?
Choose pagination or progressive loading when retrieval and returning to position matter.
Timeline
Works well when sequence and timing help explain events.
Rentals
Application activity
Search activity
18 JUN
Viewing arranged
Documents received
17 JUN
Application sent
Older activity
Grouped history
Works well when events need to be scanned by date and older entries retrieved.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Comparison
Two or more items examined against the same attributes.
Which attributes need alignment, and how much fits in the viewport?
Preserve the same attribute order when a small screen cannot show items side by side.
Comparison
Works well when the same attributes need direct comparison.
Rentals
Compare homes
Rent → Beds → Pets
North apartment
- Rent
- $1,400
- Beds
- 1
- Pets
- Allowed
Riverside home
- Rent
- $2,000
- Beds
- 2
- Pets
- Ask owner
Stacked comparison cards
Works well on narrow screens when each item repeats the same attributes in the same order.
CHOOSE BASED ON
Task context · content relationships · available width · interaction needs
Sophia Prater’s ORCA process contributes the object, relationship, CTA, and attribute lens. The node taxonomy above is UXbeam’s working framework for translating IA into interface patterns.
3. Choose navigation patterns to explore
The tree narrows the field to navigation patterns worth exploring. Platform, viewport, task focus and switching behavior determine which ones to prototype.
NN/g covers navigation trade-offs; Apple and Material document platform-specific tab and rail behavior. The shortlist above combines those constraints with the shape of the IA.
4. Rank what belongs on each screen
A Page Description Diagram makes content priority explicit before layout. Tasks, research and stakeholder judgment inform the order.
Listing screenPriority worksheet
HIGH
Essential to this visit
- Photos and price
- Contact landlord
- Landlord responsiveness T1
MEDIUM
Supports the decision
- Application requirements T3
- Map and area
- Property description
LOW
Useful afterward
- Similar listings
- Share
- Report listing
Priority is a design decision. Task tags keep each placement tied to the evidence behind it.
Dan Brown’s approach is described in Butler and Wirtanen’s introduction to PDDs.
5. Try layouts against the task
The same three listings can support different ways of choosing a home. Use a working task intent to compare arrangements before committing to one.
⌂ RentalsListings
Find your next home3 listings
North apartment1 bed$1,400
Garden studio1 bed$1,100
Riverside home2 beds$2,000
Grid
Works well when appearance helps someone recognize a suitable home.
⌂ RentalsListings
Find your next home3 listings
Max. rent: any ⌄Bedrooms: any ⌄☷
North apartment1 bed$1,400
Garden studio1 bed$1,100
Riverside home2 beds$2,000
Filtered list
Works well when rent and size need to be scanned and compared.
⌂ RentalsListings
Find your next home3 listings
North apartment1 bed$1,400
Garden studio1 bed$1,100
Riverside home2 beds$2,000
North apartment$1,400 / month · One bedroom
Application requirementsIdentity · income evidence · references
Contact landlord ↗Split view
Works well when someone needs listing detail while keeping the alternatives in view.
Same IA ≠ one inevitable UI
UI layout catalogues are useful for naming patterns; the task and content determine which ones are worth testing.
6. Grey-box the task path
Build a low-fidelity, grey-box wireframe using only the frames needed for the task. Keep each design change tied to the observation it addresses.
T3
“What documents do I need to apply?”
1
Choose a listing
2
Open the listing
3
Find the requirements
RESEARCH OBSERVATIONIn this example, the path ends at the listing description.
CANDIDATE INTERVENTIONTry requirements within the listing and retest whether they can be found.
7. Test the task intent
Turn the working task intent into a testable task. If the structure was already tree-tested, preserve the information or action sought. If it came from card sorting or another IA process, write a neutral task around the need you used to compare layouts. Then define the outcome and test whether the wireframe supports it.
IN THIS TREE-TEST EXAMPLE
Where participants looked
In this example, the path ends at the listing description.
WHAT WE CHANGED
A visible requirements section
The candidate wireframe places the information within the listing.
WHAT TO CHECK
Can the information be found?
Observe the first choice, completed path and any new difficulty caused by the layout.
Keep tree-test directness, first-click accuracy, and task completion as separate measures. Compare them quantitatively only when the outcome definitions and study designs match.
Record the result, denominator and exclusions for each study. Investigate new problems before deciding whether labels, placement or interaction need another change.
Research signal → design moves to consider
Use the result to frame a question. The design response remains a hypothesis to explore.
RESEARCH SIGNALQUESTIONS TO ASKDESIGN MOVES TO CONSIDER
Strong grouping
Does the grouping support an important task? Does it need global access?
Consider a destination, section or local grouping; test its prominence.
Coherent secondary mental model
Is the pattern meaningful, a wording or method artifact, or an opportunity for differentiation?
Inspect the pattern first. It may justify alternate access, a candidate IA, further ideation, or no change.
Contested card
Is the label ambiguous? Do the different placements support different tasks?
Inspect the card wording and the groups around it. Consider clearer wording, a cross-link or an alternate home.
Low direct / high success
Where do the detours begin? Which first choices attract participants?
Try clearer labels, a different grouping or more visible sub-items.
Repeated wrong destination
What could participants reasonably expect there? Are destination criteria clear?
Check why participants expected the content there; then consider a preview, cross-link, or label change.
Frequent task
In which context is the task frequent? How much persistent space does it warrant?
Consider a shortcut, persistent control or navigation destination where it helps.
Mental Model Detection identifies recurring ways participants organized the cards. Inspect the organizing principles, labels, and contents before deciding what to do with a secondary mental model. It may support alternate access, ideation, a candidate sitemap, or no change.
Design handoff checklist
0 of 11reviewed
Use the checklist during your handoff review.
Continue with the research
This guide is UXbeam’s synthesis of the decisions involved in carrying evidence-led IA into interface design. PDDs, OOUX / ORCA, and platform guidance contribute specific techniques referenced where they are used.
Sources
- Sophia Prater / OOUX, The ORCA Series.
- Apple Human Interface Guidelines, Tab bars.
- Android Developers / Jetpack Compose, Navigation rail.
- Colin Butler and Andrew Wirtanen, UX Magazine, Re-Introducing Page Description Diagrams.
- DevSquad, 30 User Interface Layouts Used in UI Design.