Käyttöliittymät
Mobile platforms
  1. Platforms
    1. Hardware platforms
    2. Software platforms
  2. Android
    1. Android Studio
    2. Android concepts
  3. Mobile HTML5
    1. Progressive web apps
    2. Web interfaces
    3. Offline support
    4. Graphics
    5. Multimedia
    6. Location information
    7. Touch screen
      1. Canvas
      2. Event registration
      3. Event handling
    8. Hybrid techniques
  4. UI/UX
    1. Mobile UI design challenges
  5. Mobile UI patterns
  6. Course book
  7. Related links

  • Tarkastellaan mobiilikäyttöliittymiä puhtaasti teknisesti näkökulmasta

  • Seuraavat kysymykset myös tärkeitä, mutta aiheeltaan enemmän liiketoiminnallisia.

    • Mobiilistrategia?
    • Mikä päätelaitealusta paras / mitä tuetaan?
    • Mikä levitysalusta?
    • Mikä pilvi-backend?
    • Mikä ohjelmistoalusta?
    • Web vai natiivi?

Platforms

Hardware platforms

Mobiililaitteissa on kaksi dominoivaa pääalustaa

  • Android

    • ilmestyi 2008, nyt kehitteillä 11 (Google, 2/2020)
    • suosituimmat versiot (StatCounter, 1/2020): 9.x (42%), 8.x (21%), 7.x (12%), 6.x (11%), 5.x (7%), 10.x (5%)
    • noin 87% myydyistä puhelimista (IDC, 2020)

  • iOS, iPadOS, watchOS

    • ilmestyi 2007, nyt versiossa 13 (2/2019)
    • suosituimmat versiot 2/2019 (Apple): 13 (70%), 12 (23%), vanhemmat (7%)
    • suosituimmat versiot 1/2019 (StatCounter): 13 (74%), 12 (17%), 11 (3%), 10 (3%)
    • noin 13% myydyistä puhelimista (IDC, 2020)

  • Aiempia isoja alustoja

  • Yhä kehityksessä

    • Fuchsia, LiteOS (?)

    • Kaupalliset: Mer / Sailfish / Aurora OS , PureOS , Tizen , KaiOS

    • Yhteisön ylläpitämät: Plasma Mobile , Maemo Leste , Nemo Mobile , LuneOS , Ubuntu Touch / UBports , postmarketOS

  • Aktiivisista alustoista lähes kaikki Linux-pohjaisia!

    • valitettavasti ei vakiintuneita ohj.rajapintoja

  • Linux ja Android ovat avointa lähdekoodia, silti suuri osa käyttäjistä valmistajien panttivankeja = eivät saa ohjelmistopäivityksiä

Software platforms

  • Natiivit järj.ohj.

    • Windows Mobile & Phone, Ubuntu Touch, webOS, iOS SDK, Android NDK
    • BREW, OpenFL, libGDX, Python, …

  • Ei-web-pohjaiset käyttöliittymät

    • Android SDK (Java & Kotlin), iOS SDK (Obj-C, Swift), Flutter (C/C++, Dart)
    • V-Play Engine, Corona, Xojo, LiveCode, Qt, Unity, LambdaNative, Kivy, Mono, Gluon Mobile, Adobe AIR

  • Web-tekniikkapohjaiset

    • Wakanda, Sencha Touch, Apache Cordova (PhoneGap), NSB/AppStudio, Enyo, React Native, HTML5-selaimet

  • No-code, low-code, “citizen developer”

Android

Tarkastellaan esimerkinomaisesti. iOS-kehitys sidottu enemmän Apple-ekosysteemiin.

  • Kehitys alkoi 2003, 2007 public beta, 2008 1.0
  • Avoin ja vapaa (pl. ajurit, bootloader, Play-palvelut yms.)
  • Linux-pohjainen (eroavuus kutistumassa)
  • SoC: tyypillisesti ARM
  • Ohjelmointi; C, C++, Java, Kotlin, Dart, HTML5/web-tekniikat
  • GPU-kiihdytetty käyttöliittymä, OpenGL ES & Vulkan
  • Laaja valikoima sensoreita (API)
  • Android Runtime VM (aiemmin Dalvik) & natiivi Linux
  • Laitekanta: puhelin, tabletti, älykello, -TV, -auto, IoT, …

Android Studio

  • Googlen julkaisema Android-sovelluskehityksen kehitysympäristö

  • Alustariippumaton: Windows (7+), Mac (10.10+), Linux, Chrome OS

  • Raskaampi kuin alkeiskurssien Java-kehitys

    • toiminee pääasiassa 2010-luvun tietokoneilla, pl. heikkotehoiset
    • vaatii levytilaa useita gigatavuja + projektit ja riippuvuudet

  • IntelliJ IDEA -pohjainen (2013–)

    • Aiemmin Eclipse (tuki kuopattu 2012–2016)
    • Netbeans-tilannekin huono

  • Moderni IDE (IDEA)

  • Kielituki: Java 8 (pääosin), Kotlin

  • Visual layout editor

  • Android Virtual Device (emulaattori)

  • Gradle: kääntö ja paketointi

  • APK Analyzer

  • Profilointi, debuggaus, lint

  • Proguard: tavukoodin optimointi ja obfuskointi

  • Things-, Wear- ja pilvituki

Android concepts

  • “Appsit”, APK-tiedostot
  • Aktiviteetti ~ ikkuna
    • elinkaari
  • Fragmentti
    • Views, ViewGroups
    • Widgetti ~ Control
  • XML-asettelutiedostot ~ FXML
  • Intent
    • anotaan esim. kuvan lähettämistä (asynkronisesti)
  • Palvelut
    • Context
  • Sensorit

Mobile HTML5

Tarkastellaan seuraavaksi HTML5-tekniikoita mobiilikontekstissa.

Merkittävä uusi trendi on ns. progressiiviset web-ohjelmat. Nykyiset tekniikat pyrkivätkin tuomaan kehitystä siihen suuntaan.

Progressive web apps

  • Progressive: perustuu progressive enhancement -ajattelumalliin
  • Responsive: mukautuu erikokoisiin laitteisiin
  • Connectivity independent: toimii ilman verkkoa / hitaassa verkossa
  • App-like: näyttää “ohjelmalta”, ei web-sivulta
  • Fresh: aina päivitetty
  • Safe: kryptatut yhteydet
  • Discoverable: tunnistetaan “appseiksi” w3c-määritysten ansiosta
  • Re-engageable: osaa vaivata käyttäjää tarpeen tullen
  • Installable: käyttäjä voi pitää ohjelman esim. kotinäytöllä
  • Linkable: voi jakaa linkillä

Web interfaces

Offline support

  • AppCache: vanhentunut

    • nykyään Service Workers

  • Service Workers

    • taustalla ajettava JavaScript-skripti
    • synkronointi, välimuistin hallinta
    • push-notifikaatiot yms.
    • asennetaan, aktivoidaan, ajaa taustalla, voidaan korvata

  • Service Workers ja JavaScript yleensäkin mahdollistavat käyttöliittymän logiikan hoitamista mobiilisti ja offline ilman verkkoviivettä

  • Selain on voinut määrittää aiemminkin HTTP-välimuistidirektiivejä

    • ei täysin offline enää, jos kyseessä JavaScript-sivusto

  • Web SQL Database: vanhentunut

    • Nykyään Web Storage & IndexedDB API

  • Web Storage

    • local storage, session storage
    • kuten cookies, mutta ei kulje otsikkeissa
    • isompi tietomäärä (5–25 MB per URI+host+portti)

  • IndexedDB API

    • NoSQL-tietokanta JSON-objekteja
    • ei ilmeisesti tarkkaa kokorajaa

Graphics

  • Canvas, WebGL, WebGPU ja CSS mahdollistavat graafisia ohjelmia

https://keithclark.co.uk/labs/css-fps/nojs/:

Multimedia

  • HTML5 tukee perusmuotoisesti videotoistoa
    • H264, H265, VP8, VP9, AV1
    • MP4, Ogg, WebM
    • H264/MP4 yhteensopivin yhä, patenttivapaa 2020-luvun lopussa (?)
  • Videokontrollit voivat olla puutteellisia / jättää toivomisen varaa
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
  • WebRTC mahdollistaa videoneuvottelut, kollaboratiiviset työkalut yms.
    • aiemmin Flash-appletteja, 2017 WebRTC 1.0
    • IPv6 mahdollistaa P2P-yhteydet (ei NAT-rajoituksia)

Location information

  • Geolocation API
  • JavaScript voi kysyä sijaintia ja välittää eteenpäin
  • Vaatii luvan hyväksyttämistä käyttäjällä + suojatun kontekstin
navigator.geolocation.getCurrentPosition(
  successCallback, errorCallback, options
);

Touch screen

Katso Web technology for developers > Web APIs > Touch events.

Canvas

<html>
<body>
    <canvas id="canvas" width="600" height="600">
      No support!
    </canvas>
    <br>
    <button onclick="startup()">Start</button>
    <br>
    Log: <pre id="log"></pre>
</body>
</html>

Event registration

function startup() {
    var el = document.getElementsByTagName("canvas")[0];
    el.addEventListener("touchstart", handleStart, false);
    el.addEventListener("touchend", handleEnd, false);
    el.addEventListener("touchcancel", handleCancel, false);
    el.addEventListener("touchmove", handleMove, false);
    console.log("initialized.");
}

Event handling

var ongoingTouches = [];
function handleStart(evt) {
  evt.preventDefault();
  console.log("touchstart.");
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    console.log("touchstart:" + i + "...");
    ongoingTouches.push(copyTouch(touches[i]));
    var color = colorForTouch(touches[i]);
    ctx.beginPath();
    ctx.arc(touches[i].pageX, touches[i].pageY,
            4, 0, 2 * Math.PI, false);
    ctx.fillStyle = color;
    ctx.fill();
    console.log("touchstart:" + i + ".");
  }
}

Hybrid techniques

  • Toimivat mobiililaitteen natiivissa säiliössä
  • Käyttöliittymätekniikoihin standardit HTML5-tekniikat
    • helpottaa siirtämistä muille alustoille
  • Käytössä myös natiivitekniikoiden JavaScript API
    • esim. valokuvien ottamiseksi
    • voidaan suhteellisen helposti toteuttaa eri alustoille tai käyttää jotain sovelluskehystä tähän
  • Haittoja
    • mahdollisesti hitaampi kuin natiivi ohjelma
    • toiminnallisuus riippuu käytetystä sovelluskehyksestä / tekniikasta

UI/UX

Mobile UI design challenges

  • Pienet näytöt

    • yleisesti: tarvitaan yksinkertaisempi käyttöliittymä

  • Alustojen tilanne

    • tabletit: lähes laptop-koneiden kokoluokkaa, resoluutio parempikin
    • puhelimet: trendi suureneva -- puolet yli 250€ puhelimista 6"+ (2017-2018), 6.3"+ (2018–2019), 6.5"+ (2019-2020)
    • älykellot: uudehko tuotesegmentti, voimakas kasvu
    • muut alustat: suuri vaihtelu

  • Erikokoiset näytöt

    • käyttöliittymän mukautuminen

    • esim. web-tekniikoissa tukea mukautuvalle
      käyttöliittymäsuunnittelulle (responsive design)

  • Kosketusnäyttö

    • heikompi tarkkuus sormilla
    • osassa stylus
    • osa (esim. äly-TV, äylkello) käyttää mahd. nappeja / kauko-ohjausta

  • Tekstin kirjoitus

    • suositus: mahdollisimman vähän

  • Fyysinen ympäristö

    • äänet
    • valaistus
    • käyttäjän / ympäristön liike

  • Vähäisempi keskittyminen

    • sovelluksia käytetään lyhyemmän aikaa ja
    • vähemmän keskittyneesti kuin työpöytäkoneella

Mobile UI patterns

Mobiilikäyttöön on myös kehittynyt joukko hyödyllisiä ja vakiintuneita käyttöliittymäsuunnittelun malleja.

Course book

  • Chapter 11