Rapid Prototyping of Conceptual UI’s Using Balsamiq King Balsamiq.pdf · a. Design and prototype...
Transcript of Rapid Prototyping of Conceptual UI’s Using Balsamiq King Balsamiq.pdf · a. Design and prototype...
Rapid Prototyping of Conceptual UI’s Using
BalsamiqNigel King ACMA, CISA, CISM, CISSP
Agenda1. 19:00 A little bit about me 2. 19:10 A little bit about conceptual prototyping3. 19:20 A little bit about the SafePaaS Company4. 19:30 A little bit about the problems in the worked examples5. 19:40 A review of the canvas, palette and layout behaviour of Balsamiq6. 19:50 A review of the worked examples
a. Audit Managerb. Compliance Managerc. Risk Managerd. Audit Intelligence
7. 20:00 Break8. 20:15 Poll for example from the audience9. 20: 20 Work the design
10. 20: 50 Q&A11. 21:00 Thats a wrap
A little bit about me1. Chartered Management Accountant2. Ex Chief Architect for PowerSchool3. Ex Vice President of Development at Oracle4. Lecturer in Information Technology at NTU5. Chief Strategy Officer for SafePaaS6. Worked in Oracle Applications Development for 22 Years
About Conceptual Prototyping1. Conceptual Prototype
a. Prototyping is an attempt to simulate the interaction between user and interface as realistically as possible. When a button is pressed, the corresponding operation must be carried out, and the corresponding pages must appear, try the best to simulate a full product experience.
2. Wireframinga. Wireframe is a low fidelity layout of the design which has 3 simple but direct targets:
i. Presents the main information group
ii. Draw the outline of structure and layout
iii. Vision and description of the user interface
Source: www.mockupsplus.com
Example: Wireframe
Source: UX Planet.Org
What I want from my conceptual prototype● Speed● Ability to develop test data / demo data / seed data design● Ability to develop test / demo / training flows● Ability to confirm features / functions with stakeholders● Psychological ability to through away experiments that do not work
Why ● Shorten time to first feedback● Fail early, fail often, fail at low cost
Ideas suck! Demos rule!
Getting Things (THAT MATTER) Done Against the Odds and in the Inky-black Shadow Cast by the Guardians of the Status Quo
Tom Peters 20 October 2014
Get testing● Unassisted task completion● Assistance rates● Assisted completion rates
Start the non coding stuff● Support enablement planning● Sales enablement planning● Consulting enablement planning● Partner enablement planning
My personal history with conceptual prototyping1. Visio2. Powerpoint3. Oracle UIX4. Oracle Apex5. Balsamic
My personal history with conceptual prototyping1. Visio
My personal history with conceptual prototyping1. Visio
a. Proi. Anybody can do it. ii. You can establish a template
b. Consi. Linking is fiddlyii. Snap and Glue makes layout exhaustingiii. Still not high fidelity, so may need a seperate specification for the UI.
My personal history with conceptual prototyping1. Powerpoint
My personal history with conceptual prototyping1. Powerpoint
a. Proi. Anybody can do it.ii. Templating is problematiciii. Linking is easier
b. Consi. My results have generally not conveyed the design very wellii. (Could be bad craftsman blaming the tool)iii. Not high fidelity
My personal history with conceptual prototyping1. Oracle UIX
<page xmlns="http://xmlns.oracle.com/uix/controller"><content> <header xmlns="http://xmlns.oracle.com/uix/ui" xmlns:data="http://xmlns.oracle.com/uix/ui" text="UIX Components Header Bean"> <contents> <dataScope> <contents> <link data:text="text1@dat1" data:destination="dest1@dat1"/> <link data:text="text2@dat1" data:destination="dest2@dat1"/> </contents> <provider> <data name="dat1"> <inline text1="Oracle" dest1="http://www.oracle.com" text2="Cnn" dest2="http://cnn.com" /> </data> </provider> </dataScope> </contents> </header></content></page>
My personal history with conceptual prototyping1. Oracle UIX
a. Proi. Ready Pallet of BLAF widgetsii. High Fidelity iii. Really quick
b. Consi. Coding rather than sketchingii. Pallet is restricted to standard BLAF componentsiii. Hard to walk away from the design
My personal history with conceptual prototyping1. Oracle APEX
My personal history with conceptual prototyping1. Oracle APEX
a. Proi. Ready Pallet of BLAF widgetsii. High Fidelity iii. A real working prototype
b. Consi. Coding rather than sketchingii. Pallet is restricted to standard BLAF componentsiii. Difficult to throw experiments away because it it working code
My personal history with conceptual prototyping1. Balsamiq
My personal history with conceptual prototyping1. Balsamiq
a. Proi. Anybody can do it.ii. Linking is easyiii. Really quickiv. Purposely tries to look like a quick sketch
b. Consi. Not high fidelity.
Other UI Prototyping tools1. Proto.io - Prototypes that feel real
a. Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required…
2. Free mobile & web prototyping (iOS, Android) for designers - Marvela. Turn sketches and designs into interactive web, iPhone, iPad, Android and Apple Watch prototypes and
mockups…marvelapp.com
3. Adobe Experience Design CC | Download Adobe UX prototyping toolsa. Design and prototype websites and mobile apps with Adobe Experience Design CC (Beta), the first all-in-one
solution for…www.adobe.com
4. UXPin - UX Design, Wireframing Tools, Prototyping Toolsa. Create and collaborate across your entire design workflow with UXPin. Go quickly from wireframe to
interactive…www.uxpin.com
5. Origami Studio - Design Prototypinga. A new tool for designing modern interfaces, built and used by designers at Facebook
origami.design
A little bit about SafePaaS
Complete GRC with Integrated ERP Controls Management
ProcessPaaS
AccessPaaS Operations Management
SafeSight
Risk Library
Incident Workflow
Financial Close ManagerProcurement Manager Customer Order Manager
Audit Manager Policy ManagerCompliance Manager
Master Data Monitor
Dat
aPro
be In
tegr
atio
n Se
rvic
es
MonitorPaaSTransaction Monitor
Configuration Monitor
App Life Cycle Manager
Access Monitor
Policy Monitor
Roles Manager
ARCPaaS
iAccess
Enterprise Risk Manager Rules Repository
Predictive Analytics
Process Controls Management
IT Governance: Access Controls Management IT Governance: Continuous Controls Monitoring
Audit Risk and Compliance Management
Data Privacy Monitor
Data/Doc Manager
Approach
SOD Scanner Secure2Sign
Access AnalyticsERP MonitorsProcess Monitor Audit AnalyticsGRC Monitor
People Manager
A little bit about SafePaaS1. Cloud based provider of Governance Risk and Compliance services2. Based out of Austin Texas3. About 250 customers worldwide4. Centered around access application controls testing5. Needing to expand the offering / deal size / farm the install base
A little bit about the problems addressed by the prototypeAudit Manager - A specialized Project Management system for Internal and External Auditors.
Compliance Manager - A tool to collate management assertion of the effectiveness of the internal controls throughout the management chain.
Risk Manager - A tool to surface a library of risks, rate those risks for their impact and likelihood and declare the appropriate treatment for that risk.
Audit Intelligence - A tool for Audit Committees and Chief Audit Executives to confirm the state of internal controls and plan for testing across the enterprise.
A quick review of the canvas, palette and layout behaviour
Review of the UI Prototypes
Audit Manager - Review in Balsamiq
Compliance Manager - Review in PDF
Risk Manager - Review in PDF.
Audit Intelligence - Review in Balsamiq
Review of the UI Prototypes
● Audit Manager - Review in Balsamiq○ Features
■ Quick review of Pallet■ Pages■ Containers■ Breadcrumbs■ Links■ Data Tables■ Hierarchies
Review of the UI Prototypes
● Compliance Manager - Review in PDF○ Features
■ Saving to PDF■ Post it notes■ Links within PDF Document
Review of the UI Prototypes
● Risk Manager - Review in PDF.○ Features
■ Putting new widgets in the Pallet
Review of the UI Prototypes
● Audit Intelligence - Review in Balsamiq○ Features
■ Branding Area■ Badges
Polling for Worked Example● University Timetabling● Wellness Tracking● Citizen Issue Logging
References and Further Reading1. Create A Working Conceptual Prototype For Your App In Less Than A Week
a. https://hackernoon.com/create-a-working-conceptual-prototype-for-your-app-in-less-than-a-week-ce904fe3bc5d
2. Basic UI/UX Design Concept Difference Between Wireframe & Prototypea. https://uxplanet.org/basic-ui-ux-design-concept-difference-between-wireframe-prototype-e38c
d3580543