Mobil touch input for talent trees

I en verden, hvor mobilspil dominerer, er det essentielt at kunne tilbyde en brugervenlig oplevelse, selv når vi bringer desktop-koncepter over på mindre skærme. Et klassisk eksempel er talenttræer i spil, hvor man normalt bruger venstreklik til at tildele og højreklik til at fjerne point. Men hvordan overfører man denne funktionalitet til en touch-baseret enhed, hvor højreklikket ikke er en naturlig bevægelse?

Dette er en udfordring, mange udviklere står overfor, især når de genskaber populære spilfunktioner til web. At finde en løsning, der både er intuitiv på mobil og ikke kompromitterer oplevelsen for desktop-brugere, kan virke som en svær balancegang. Lad os dykke ned i, hvordan man kan tackle dette problem og skabe en gnidningsfri brugeroplevelse på tværs af enheder.

Udfordringen med Højreklik på Mobil

På en desktop-computer er højreklikket en etableret metode til at udføre sekundære handlinger. I forbindelse med talenttræer fungerer det perfekt til at fjerne et point. Men på en mobil enhed, hvor interaktionen primært sker via touch, er der ingen direkte ækvivalent til højreklik. Den nærmeste handling er ofte et langt tryk (tap-and-hold), men dette føles klodset og unaturligt for mange brugere, især når det kommer til hurtige justeringer i et spil.

Derudover er der problemet med hover-effekter. På desktop vises tooltips eller yderligere information, når musen svæver over et element. På mobil sker hover-effekter typisk først ved et tryk, hvilket betyder, at brugeren ikke kan se informationen, før de potentielt allerede har udført en handling. Dette er problematisk, da brugerne ønsker at kunne læse om et talent, før de tildeler et point til det.

Eksisterende Løsninger og Deres Begrænsninger

En af de foreslåede løsninger var at implementere et klik for at vise en tooltip, der indeholder både en "Tildel" og en "Fjern" knap. Selvom dette løser problemet med at vise information før handling, introducerer det et ekstra trin for alle brugere. For desktop-brugere, der er vant til den direkte venstre-/højreklik-metode, føles dette som unødvendig kompleksitet. For mobilbrugere kan det være en acceptabel løsning, men den er ikke altid den mest elegante.

En anden tilgang, der ses i nogle spil, er at fjerne muligheden for at fjerne point helt. I stedet tilbydes en "nulstil hele træet" funktion. Selvom dette er en simpel løsning for udvikleren, er det en dårlig brugeroplevelse. Spillere ønsker ofte fleksibilitet til at justere deres valg uden at skulle starte forfra.

Intuitiv Mobil Interaktion for Talenttræer

Nøglen til en god mobiloplevelse ligger i at efterligne de bevægelser og interaktioner, som mobilbrugere er vant til, samtidig med at man bevarer funktionaliteten for desktop-brugere. Her er et par strategier, der kan implementeres:

1. Langt Tryk for Sekundær Handling

I stedet for et højreklik kan et langt tryk på en talent-node bruges til at åbne en kontekstmenu eller direkte aktivere fjernelsesfunktionen. For at forbedre oplevelsen kan man:

• Visuel Feedback: Når brugeren trykker og holder, skal der være klar visuel feedback, der indikerer, at en sekundær handling er i gang (f.eks. en let animation eller en farveændring på noden).
• Timing: Sæt timingen for det lange tryk, så det føles responsivt, men ikke så kort, at det aktiveres ved et uheld. En varighed på omkring 300-500 ms er ofte passende.

2. Gestusbaseret Fjernelse

En mere avanceret, men potentielt meget intuitiv metode, er at bruge en specifik gestus til at fjerne point. For eksempel:

• Swipe Ned: Et swipe nedad på en talent-node, der allerede har et tildelt point, kunne fjerne det. Dette er en bevægelse, som mange brugere kender fra andre apps.
• To-Finger Tryk: Et tryk med to fingre på en node kunne også bruges til at aktivere fjernelsesfunktionen.

Disse gestus skal implementeres omhyggeligt for at undgå konflikter med andre handlinger i spillet.

3. Forbedret Tooltip og Handling

Som du selv foreslog, er en tooltip med knapper en mulighed. For at gøre den mere elegant og mindre besværlig for desktop-brugere, kan man overveje følgende:

• Kontekstuel Visning: Tooltipen vises ved et enkelt tryk, men indeholder kun information. Først ved et *andet* tryk på et specifikt område af tooltipen (f.eks. en "+"-knap) tildeles et point. For at fjerne et point, kunne man f.eks. dobbelt-trykke på noden, eller der kunne være en dedikeret "Fjern"-knap i tooltipen, der vises efter det første tryk.
• Direkte Handling ved Langt Tryk: Kombiner det lange tryk med en direkte handling. Hvis et point er tildelt, kan et langt tryk fjerne det. Hvis intet point er tildelt, kan et langt tryk vise tooltipen med en "Tildel" knap.

Sammenligning af Metoder

Lad os se på de forskellige metoder i en tabel for at vurdere deres egnethed:

Anbefalet Løsning: Den Kombinerede Tilgang

Den mest lovende løsning, der balancerer behovene for både mobil- og desktop-brugere, er en kombination af intuitiv touch-interaktion og klare visuelle signaler:

1. Enkelt Tryk: Et enkelt tryk på en talent-node viser en tooltip med detaljeret information om talentet. Denne tooltip kan også indeholde en tydelig "+"-knap for at tildele et point. Dette sikrer, at brugeren altid kan se informationen, før de foretager en handling.
2. Langt Tryk for Fjernelse: Et langt tryk på en node, der allerede har et tildelt point, fjerner punktet direkte. Dette giver en hurtig og effektiv måde at fortryde valg på, der minder om desktop-højreklikket uden at kræve et egentligt højreklik.
3. Desktop-kompatibilitet: På desktop vil et enkelt klik vise tooltipen (svarende til hover), og et klik på "+"-knappen tildeler et point. Højreklikket på noden kan også konfigureres til at fjerne et point, hvilket bevarer den velkendte funktionalitet.

Fordele ved denne Løsning:

• Konsistent Oplevelse: Brugerne behøver ikke lære radikalt forskellige metoder afhængigt af enheden.
• Intuitivt på Mobil: Langt tryk er en velkendt gestus for sekundære handlinger.
• Informationsrigdom: Tooltips sikrer, at brugerne altid har den nødvendige information.
• Effektivitet: Direkte handlinger (som langt tryk for fjernelse) sparer tid.

Afsluttende Overvejelser

Når du implementerer dette, er det vigtigt at teste grundigt på forskellige enheder og med forskellige brugere. Vær opmærksom på følgende:

• Visuel Klarhed: Sørg for, at det er tydeligt, hvornår et punkt er tildelt, og hvordan man fjerner det. Brug animationer eller ikoner til at forbedre forståelsen.
• Tilgængelighed: Overvej brugere med motoriske vanskeligheder. Enkle, klare interaktioner er altid at foretrække.
• Performance: Sørg for, at tooltipen og de tilknyttede handlinger loader hurtigt uden forsinkelse.

Ved at følge disse principper kan du skabe en talenttræ-grænseflade, der er lige så engagerende og funktionel på en mobiltelefon, som den er på en computer. Det handler om at forstå brugerens kontekst og tilpasse interaktionerne derefter, uden at gå på kompromis med den overordnede spiloplevelse.

Hvis du vil læse andre artikler, der ligner Mobil touch input for talent trees, kan du besøge kategorien Mobil.