We put stunning user experiences on the road. 2 Agenda - - PowerPoint PPT Presentation

▶
we put stunning user experiences on the road
SMART_READER_LITE
LIVE PREVIEW

We put stunning user experiences on the road. 2 Agenda - - PowerPoint PPT Presentation

Mar 05, 2023 481 likes •709 views

Rapid UI Prototyping Using Qt Quick By Jrgen Bocklage-Ryannel We put stunning user experiences on the road. 2 Agenda Prototyping Prototyping with QML Prototyping with QML Demo Prototyping Prototyping

slide-1
SLIDE 1

Rapid UI Prototyping Using Qt Quick

By Jürgen Bocklage-Ryannel

slide-2
SLIDE 2

We ¡put ¡stunning ¡user ¡ experiences ¡on ¡the ¡ road.

2 ¡

slide-3
SLIDE 3

Agenda

  • Prototyping
  • Prototyping with QML
  • Prototyping with QML Demo
slide-4
SLIDE 4

Prototyping

slide-5
SLIDE 5

Prototyping

  • Allow users to evaluate design proposals
  • Feedback based on try-out

– in contrast to read a descriptions

slide-6
SLIDE 6

Evolutionary Prototyping

  • Build a structured prototype
  • Constantly refine it
  • Can become the product

…evolu'onary ¡prototyping ¡acknowledges ¡that ¡we ¡ do ¡not ¡understand ¡all ¡the ¡requirements ¡and ¡builds ¡

  • nly ¡those ¡that ¡are ¡well ¡understood. ¡

¡

slide-7
SLIDE 7

Elements of User Experience

Surface ¡

  • Images, ¡Text ¡

Skeleton ¡

  • Placement ¡of ¡Bu9ons, ¡Tabs, ¡Photos, ¡… ¡

Structure ¡

  • Naviga@on ¡and ¡Data ¡Hierarchy ¡

Scope ¡

  • Features ¡and ¡Func@ons ¡

Strategy ¡

  • Business ¡Benefits ¡

Source: ¡THE ¡ELEMENTS ¡OF ¡USER ¡EXPERIENCE, ¡Jesse ¡James ¡Garre9 ¡

slide-8
SLIDE 8

UI Development

Wireframes ¡ Graphics ¡ Mo@on ¡ Prototype ¡ Structure ¡ Skeleton ¡ Surface ¡ Surface ¡ Tool ¡

slide-9
SLIDE 9

HMI Stack

Mo@on ¡

Home ¡ Movies ¡ Genres ¡ Movie ¡List ¡ … ¡ Music ¡ Albums ¡ … ¡ SeUngs ¡

Graphics ¡ Wireframes ¡

slide-10
SLIDE 10

Evolutionary Prototype

Interac@on ¡ Design ¡ Graphics ¡ Design ¡ Development ¡ Simula@on ¡

Simulated ¡Backend ¡

UI ¡ Product ¡

Real ¡Backend ¡

UI ¡

review ¡ input ¡ feedback ¡

slide-11
SLIDE 11

Prototyping with QML

slide-12
SLIDE 12

Information Flow

UI Specification Frontend Backend OS Requirements Acceptance Test

slide-13
SLIDE 13

Backend ¡ Frontend ¡

Typical QML Based System

System ¡UI ¡ Controls ¡ Applica@on ¡Views ¡ QML ¡Plugins ¡ Services ¡ API ¡

slide-14
SLIDE 14

Prototyping Environment

Frontend ¡ User ¡Interface ¡ Mocked ¡Controls ¡ QML ¡Backend ¡ Simula@on ¡ API ¡

slide-15
SLIDE 15

Practical Considerations

  • Fast round trip time
  • Simplified user interface
  • Easy export of assets
  • Easy access to data
  • Verifiable on hardware
  • Open to evolve
slide-16
SLIDE 16

Toolset

  • Balsamiq – UI Wireframing
  • PNG Express – Photoshop export
  • Sketch – Vector Drawing (Mac only)
  • Qt Creator – The IDE for Qt
  • QmlLive – live code viewer
  • JSON data via REST API
  • Many QML techniques
slide-17
SLIDE 17

DEMO DEMO

Prototyping with QML

slide-18
SLIDE 18

Pixy

slide-19
SLIDE 19

Demo

  • Part 1 – Structure, Skeleton

– Mocking a Wireframe UI

  • Part 2 – Surface

– Adding Graphics, Polishing

  • Part 3 – Backend API

– Enabling Data

slide-20
SLIDE 20

Conclusion Conclusion

slide-21
SLIDE 21

Conclusion

  • Work close with Designers
  • Inject yourself early in the creation pipeline
  • Evolutionary Prototype becomes Product
  • Clear separation between Frontend and

Backend

  • Prioritize communication
  • Qt is often only one of many options for UI
slide-22
SLIDE 22

References

  • Balsamiq - http://balsamiq.com
  • Qt - http://www.qt.io
  • PNG Express - http://www.pngexpress.com
  • Sketch - http://bohemiancoding.com/sketch/
  • Pixy - https://github.com/jryannel/pixy
  • QmlLive - https://github.com/Pelagicore/qmllive
  • Data Provider - https://github.com/Pelagicore/mock-dataprovider