Web Games en het mobiele web Hoorcollege Webdesign 9 6 juni 2014 Christof van Nimwegen
Webgames: scope dit college onderdeel
Games staan nu centraal in deze faculteit. In een cursus over webdesign MOET het genoemd, maar het is geen examenstof
NIET Hoe maken we ze, genoeg vakken hierover Gametheorien Uitputtende analyses op wat er is (too much)
WEL (kort) Mogelijkheden aftasten in context Informatiekunde Wat kunnen ze bereiken, waarvoor Voordelen t.o.v. andere typen games
2
Webgames: een ander ding
3
Webgames: wat is er anders?
Browser: lage instapdrempel En PC/Mac heeft IEDEREEN 24 uur per dag beschikbaar Verbonden met de rest van de WWWereld Meestal gratis Geen installatie vereist, geen extra software nodig in principe. Dus neemt minder ruimte in Veranderingen in games (updates, next levels) makkelijker en sneller toegankelijk
4
Webgames: browser games gewild
MMO’s Massively Multiplayer Online Games
5
Webgames: meestal toch entertainment
RPG, MMROPG (WoW), Strategy games (civilization), Adventure games (Lineage) Simulation game (Fifa), Action games (call of duty), Casual games, Kansspelen
6
Webgames: Meestal entertainment
7
Webgames: Non-entertainment
Serious games Educational Rekenen, taal etc. Persuasive Sociale thema’s Awareness Assessment Gezondheid Advergames
8
Webgames: technologie….. CSS3D WebGL Ajax
Java
9
Webgames: Uit eigen stal ;-): gamemaker!
Initieel door Prof. Dr. Marc Overmars
10
Webgames: Mobile gaming!
Heel groot Maar is eigenlijk geen web as in WWW
11
Het mobiele web
12
Het mobiele web
Sinds een paar jaar kopen we meer smartphones dan computers/laptops (nog) het meeste gebruikt door jonge mensen De spelers iOS Android Windows Phone Blackberry ach….
13
Het mobiele web
Mobiel? Wifi Mobiel netwerk
Browsen of apps? Apps worden meer gebruikt Maar vaak voor 1e entry mobile browser, men wil niet voor alles, of eenmalige zaken een app installeren We hebben het hier dus over web pages in browsers Niet voor alles is een app, en ook niet voor elk OS
14
Het mobiele web: app vs. webpagina
APP
WEB
15
Het mobiele web: voordelen browser
Voordelen Werkt op alle mobiele apparaten Minder opslagruimte nodig om iets te bekijken/gebruiken OS onafhankelijk (let wel op browsers) Geen gedoe met updates Geen publish kosten Goedkoper om te maken / te onderhouden Verzamelt minder informatie over JOU Nadelen Browser verschillen (uiteraard) Iets langere weg (url typen, bookmark opzoeken) Toch minder mogelijk, met name hardware 16
Het mobiele web: fysieke factoren
Daglicht, spiegeling Beweging Afmeting Klein toetsenbord, grote vingers, denk aan grote buttons, selectors, typen Tekst grootte Geluid anders gebruiken (omgeving) Input: touch Vaak in verloren momenten: weinig tijd, dus Usability NOG belangrijker …… 17
Mobiele web: nieuwe dingen exploiteerbaar! Smartphone heeft (vaak):
Camera(‘s) GPS Touch Bewegings sensors RFID NFC … Vanuit webpagina’s nog beperkt mogelijk, maar dat zal veranderen 18
Het mobiele web: software/netwerk factoren
Laadtijd door tragere connectie: zo klein mogelijke images Browser verschillen Responsive design, verschillende devices (altijd weer) “Selectie” tools: pas ermee op Geen Flash Orientatie, meer verticale menus Geen tabbed browsing (niet echt) Geen popups m-dot websites: waarschijnlijk aan het eindigen ……. 19
Het mobiele web: hoe “touchen” we?
20
Het mobiele web: hoe “touchen” we?
21
Het mobiele web: richtlijnen
Ontwerp voor minder data Liever tekst-links Geen Flash, Java, Frames and Pop Ups Geef toch ook toegang aan gehele site Zet zelden gebruikte buttons ver weg van de rest (touch gaat vaak fout) Vaak gebruikte knoppen en actie knopen moeten makkelijker te bedienen zijn Android: pas op met buttons in de buurt van phone buttons Houd core content hetzelfde Denk aan batterylife Emulators!!! 22
Het mobiele web: image afmetingen
Beter geen images dan te kleine images
23
Het mobiele web: minder tekst
24
Het mobiele web: minder tekst
25
Het mobiele web: we swipen!
Maar scroll bars willen we niet. Geef affordance over swipen, bv. Door indicatie dat er links of rechts nog meer is
26
Het mobiele web: Stijl van elementen
Nog belangrijker dan op “gewoon” web: Interactieve elementen andere stijl dan informatie elementen
FOUT !
27
Het mobiele web: kleurcontrast
Ook weer meer dan op het gewone web: zorg voor goede kleurcontrasten
FOUT !
28
Het mobiele web: button-look
Laat zaken die GEEN button zijn er ook niet zo uitzien
29
Het mobiele web: Respecteer conventies
Tussen platforms:
30
Het mobiele web: Nog meer CSS3!
Bv.: ronde hoeken (kan in CSS3) geven een “knop” gevoel, zonder dat je lastige achtergrond images nodig hebt Drop shadows (ook CSS3) helpt voor button gevoel
31
Het mobiele web: inklappen/uitklappen
32
Het mobiele web: nog maar net begonnen
Vragen?
33
