52
Refine enterprise applications by focusing on user experience Emil Pennlöv 2016-11-08

SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

  • Upload
    sencha

  • View
    68

  • Download
    0

Embed Size (px)

Citation preview

Page 1: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Refine enterprise applications by focusing on user experience

Emil Pennlöv2016-11-08

Page 2: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Emil Pennlöv

• 13 years in web tech

• 7 years working with Sencha framwork(s)

• Certified trainer for Sencha

• Team leader at Orango AB

2

Page 3: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

OrangoERP specialists• Microsoft Dynamics AX, Microsoft Dynamics NAV, PRMS & Bison

• 110+ employees

• Malmö, Stockholm, Helsingborg & Kristianstad

• Select partner with Sencha

• 8 Sencha developers - both internal & external projects

Page 4: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

[email protected]

EmilPennlov

Emil Pennlöv

www.meetup.com/The-Oresund-ExtJS-Meetup/

Stay in touch

Page 5: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Agenda

ERPchallenges

UXhappy users

TOOLBOXcomponents

Page 6: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ERP / Challenges with large scale and data heavy applications

Page 7: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ERP?

“Emil, please tell me about ERP so I can fall asleep” - Wife

Page 8: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ERPThe hub of an organization

Purchasing

Manufacturing

Warehouse Management

Sales

Financial Management

CRM

API

Handheld applications

3rd party application

Page 9: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ERPA lot of data

1 000s of tables1 000 000s of records in each table10 000s of transactions each day

1 000s of pages in the system

Page 10: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ERPComplexity

Page 11: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Hide complexity from user

• image • text• live stock balance• customer unique price• …

Order App

Add to cart

120 SEK

- +8 psc

200 in stock

Page 12: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ExampleRetail handheld

by Orango for Panduro Hobby

Page 13: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ExampleRetail handheld

by Orango for Panduro Hobby

Page 14: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

UX / How to get happy users

Page 15: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

User ExperienceVisual design, information

architecture, usability, interaction design

Great UXcreates confident and

happy users

UX

which encourages them touse your application

Page 16: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Banana1 kg. More info >>

23,20 SEK/kg - +5 pcs

Page 17: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Evolvement of UX

ux

time

B2C

B2B

now

Page 18: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

UX from B2CHow does it affect enterprise developers (like us)?

We can get inspired by great workOur customers have an unmet modernization

need – a lot of work for usWe will be compared with large teams

with unlimited resources

++

-

Page 19: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Real world examples of good (B2C) UXHow users became happy• Uber- Rated driver & trusted payment

• Airbnb- Rated host & trusted payment

• Pokémon Go- Combining gaming & health

• Bank, tax, payment, authority- Remove (snail) mail with electronic signatures

Page 20: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Real world examples of good (B2C) UXUnhappy parking

Page 21: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Real world examples of good (B2C) UXHappy parking with Parkster

by Parkster

1 - choose parking area 2 - park

Page 22: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Who is in focus?

Page 23: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

The user!

Page 24: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

The UI of an Enterprise applicationis often based on database design

Page 25: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Real world examples of good (B2B) UXHow users became happy• Slack- Flexible & searchable communication

• Basecamp- Makes it easy to be good

• Microsoft Dynamics 365- Real web based clients

• Workplace by Facebook- B2C approaching B2B

Page 26: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Real world examples of good (B2B) UXWhat makes a consultant unhappy?

Mobile time sheet by Orango

Page 27: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

UX for B2BHow can we make the enterprise system user happy?

Warehouse management

Manufacturing

Purchasing

Financial management

Sale

s

Serv

ice

Tran

spor

t

Management

Company(with an ERP system)

Customer Supplier

Page 28: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Toolbox / Using custom components to achieve great UX

Page 29: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

ComponentsA way to improve UX• A component may:- Be seen on the screen

- Visualize data

- Expect input

- Be interacted with

• Ext JS …- Provides a great set ( grid, tree, chart, form, window, d3, pivot etc.)

- Components are highly customizable using configurations

- Provides the means to create your own custom components

Page 30: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

A system handles a lot of data - the tricky part is

how to visualize it and get the desired input

Page 31: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Bison ERP

Page 32: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Form fields

' updatedcontainer '

' tablelookup'

Page 33: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Form fields

' clickfield'

' linkfield'

' uploadarea'

Page 34: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

filter

grid

Filter

Page 35: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

filter

grid

Filter

Page 36: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Filter

Page 37: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Filter

Page 38: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Filter

Page 39: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Filter

Page 40: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Filter

Page 41: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Filter

Page 42: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Filter

Page 43: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Compare

Page 44: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Compare

Page 45: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Compare

Page 46: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

KPI

• What and why- Key Performance Indicator

- System has the data

- Push

- Learn and improve

• Avoid seeing a KPI as …- A design element

- Something that’s interesting for everyone

- A dead end

$1,800,000Revenue

+2%

Page 47: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

KPI

Page 48: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

KPI

Page 49: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Summary

Page 50: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Summary

Utilize the system

Hide complexity

Modernize

Visualize (a lot of) data

Get the desired input

Reuse & scale

Attract the user

Make it easy to use

Show relevant information

ERPchallenges

UXhappy users

TOOLBOXcomponents

Page 51: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov

Please Take the Survey in the Mobile App

• Navigate to this session in the mobile app

• Click on “Evaluate Session”

• Respondents will be entered into a drawing to win one of five $50 Amazon gift cards

Page 52: SenchaCon 2016: Refine Enterprise Applications by Focusing on U0ser Experience - Emil Pennlov