87 lines
2.2 KiB
Markdown
87 lines
2.2 KiB
Markdown
|
|
# MOBILE-FIRST ENFORCEMENT STANDARD
|
|||
|
|
**Låst:** 2026-06-21, Erik Svensson
|
|||
|
|
**Status:** GLOBAL — gäller Landvex, quiXzoom, AMOS, alla produkter
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Kärnprincip (LÅST)
|
|||
|
|
iPhone-first. Aldrig desktop-first.
|
|||
|
|
Konflikt mobil vs desktop: **MOBIL VINNER ALLTID.**
|
|||
|
|
|
|||
|
|
Benchmark: Apple Maps, Apple Wallet, Apple Photos, Apple Health, Apple Weather.
|
|||
|
|
INTE: andra SaaS-produkter.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Känslan (LÅST)
|
|||
|
|
Clean · Fast · Light · Premium · Effortless · Familiar to iPhone users
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Navigation
|
|||
|
|
- Minst 44×44pt touch targets
|
|||
|
|
- Bottom navigation > top navigation
|
|||
|
|
- Floating actions > dolda actions
|
|||
|
|
- Viktiga actions: nåbara med en tumme
|
|||
|
|
- Inga hover-beroende funktioner
|
|||
|
|
- Inga desktop-navigeringsmönster
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Visuell design
|
|||
|
|
- **Ljust tema** som default (inte mörkt cyberpunk)
|
|||
|
|
- Ljusa ytor, hög läsbarhet, mjuka skuggor
|
|||
|
|
- Generöst whitespace, rundade hörn, tydlig hierarki
|
|||
|
|
- Minimal visuellt brus
|
|||
|
|
|
|||
|
|
**Undvik:**
|
|||
|
|
- Mörka cyberpunk-teman
|
|||
|
|
- Hacker-estetik / gaming-estetik
|
|||
|
|
- Tunga gradienter / aggressiv kontrast
|
|||
|
|
- Täta dashboards / enterprise-komplexitet
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Informationstäthet
|
|||
|
|
Minska med minst 30%.
|
|||
|
|
Varje skärm besvarar: **"Vad är nästa steg?"** — bara det dominerar.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Dashboard-regler
|
|||
|
|
**Avvisa:** stora tabeller, spreadsheet-layouts, KPI-väggar, tiny charts.
|
|||
|
|
**Föredra:** cards, stacked content, swipe-mönster, expanderbara sektioner, progressive disclosure.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Mobile Audit — varje sida utvärderas på:
|
|||
|
|
1. iPhone 16 Pro
|
|||
|
|
2. iPhone 16
|
|||
|
|
3. iPhone 15
|
|||
|
|
4. iPhone SE
|
|||
|
|
|
|||
|
|
Mobil godkänns INNAN desktop-anpassning ens övervägs.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Final Validation Checklist (LÅST)
|
|||
|
|
Innan något godkänns:
|
|||
|
|
- [ ] Känns det naturligt inuti iOS?
|
|||
|
|
- [ ] Kan icke-teknisk användare använda det med en tumme?
|
|||
|
|
- [ ] Är varje primär action uppenbar inom 3 sekunder?
|
|||
|
|
- [ ] Känns det mer som en iPhone-app än en webbplats?
|
|||
|
|
- [ ] Fungerar det komfortabelt under förflyttning?
|
|||
|
|
|
|||
|
|
**Om inte alla svar är JA: designa om.**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Målutfall (LÅST)
|
|||
|
|
Användare ska anta att det är en **native iPhone-applikation som råkar köra i browsern** — inte en webbplats som råkar fungera på mobil.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Kontext
|
|||
|
|
Landvex/quiXzoom/AMOS-användare arbetar ute på fältet, i bil, på byggarbetsplatser, under förflyttning.
|
|||
|
|
Design optimeras för: **"en hand, en tumme, tre sekunder."**
|