creating realistic user experiences with interactive prototypes

30
1 Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

Upload: perficient-inc

Post on 27-Jan-2015

106 views

Category:

Design


0 download

DESCRIPTION

A webinar for IT, software, user experience and design professionals. Interactive prototypes and simulations allow designs to be tested and validated with real users before the development process begins. This provides an opportunity to make changes and provide stakeholders with a preview of the application design and functionality before coding starts. Inexpensively created interactive prototypes allow you to see and touch what w...ill be built before you build it and allow you to gather important user experience which can save time and effort while improving design in the process. Join us as we discuss: • How prototyping can save you money and help you get it right the first time • Involving stakeholders to identify key tasks to be prototyped and build consensus • Prototype fidelity: low, mid or high. Which to use and when • Choosing the right tool to produce your prototype • Determining the method of getting stakeholder buy in and user feedback, both in person and remotely Presenter DeeDee DeMulling is Director, User Experience, Perficient, Inc.

TRANSCRIPT

Page 1: Creating Realistic User Experiences with Interactive Prototypes

1

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

���������������

�����������������������������������

���������������������������

Page 2: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

� ������!������

��������������� �������������������������������������������������

�����������������������

��������������������������� ��������������������������

������������������������������������� �����������������������

��������� �������������������������������������� ����������

�������������

Perficient is an IT consulting firm with mission to “help clients implement business-driven IT solutions” that deliver business value in the form of integrated business processes and technologies that meet the expectations of their customers.

Page 3: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

����������

� ���� � �� !!"

� ���������#$�%&�'�(

� )���������������������*�#�+,��� �&

– ,�������,����������,������� �,�������$�����$������$�������������-�.������/� ���������0�������������1����������� �������#��2���#��3����� (������

� � 445��������

� $� ����� ���������������

� #���� 6445����������� 7�����

� ������������������������8��������������� ��

� 0���������� ��9�� ���������������� ����������

The fast facts about Perficient: we are positioned as a rapidly growing, successful IT services firm with sufficient scale to handle large projects while being more flexible and responsive, based on our size relative to the large players.

Page 4: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

"��#�������

We help you strategically address business process or technology problems and offer you targeted solutions with positive impacts for your company, your partners and your customers.

Page 5: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

"������������������ ��� �������

�������� $������%�&���'����� �(���(��������

Proven user research and analysis techniques enable us to understand users’goals, attitudes, and behaviors. We prioritize their needs against business and IT goals to define an experience strategy that guides our design decisions.

Based on user input, we define the information structure and develop layered blueprints, from information architecture through interaction and visual design. Our focus on brand integration andusability bring the user experience to life and ensure that it exceeds user expectations.

Development and Engineering teams work closely with Design teams to execute the supporting technical solutions. Perficient uses flexible collaboration models and program lifecycles, tailored to specific engagement type.

Perficient has a customizable user-centered design approach for developing highly intuitive and usable solutions. With research, design, testing, and implementation, we create a user experience that meets the needs of its users, while being satisfying and enjoyable to use. Using next generation techniques, we help you achieve the desirable mix of brand and functionality, as well as usability.

Page 6: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

"��������������������������������������

��)��'�����

#��������

*�')��'�����

����������������������������

Corp Logo

6

Page 7: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

"��������������������������������������

+�)��'�����

'���������������� ����� �����������

Example from protoshare.com Example from irise.com

Page 8: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

��������!��'��,��-� ����

$����������

• (����:������������������� ����������� ���������������

• 3����(������ �������������������������������� ��

� 3���&#����������:������������������� ;��<

� (����&,��������������������;�� <

� ����&#���,�����=-��������;��<

� (�� ����������������������� �������� ����������

Poll: Which fidelity of prototyping are you or your organization doing most often?- Lo- Mid- Hi- None

8

Page 9: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

������������*������

�������������������������

• Most UX professionals are adept at paper and ePaper prototyping. Most visual designers are adept at creating design comps. Now both are beginning to be adept at interactive prototypes because of the simplicity of expressing requirements and the richness of user feedback we can collect during the design phase.

9

Page 10: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

#�������'���������

��.���(����#���'�!�������

• $������ ����� ������>���:��������

• ,����������� ���

• *������������ ��������������������������

• ���������������������/(�� ��������

• 3����������

• '� ���������:��������

• '� �����������:���

��������/��'���

• Build consensus of what the product/site needs to do and for whom

• Facilitate collaborative design sessions

10

Page 11: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

��������������'�����

��

• ������������

• .���������� �����������

• �����������������������

*�'

• ��������������������������

• ?���������������� ����� �� �����

• 0�������������������� �������������

+�

• �����������(���

• */$��������������

• /�����������������������������-*/�����������������

• 0�������������� �������� ������

11

Page 12: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

��)��'�����

*����'

• $������������������8������������ ���

• #���������

�������������

• �����&�����9������������1���������

• ������&�����������@������������

���' ���

� /�������&������������ �����������������������

� '�����&#���9������������������������������

� �������&3��������������������������������������������

12

Page 13: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

��)��'������ ����#�'�

��

A #������ ����������B �������� �����������

A /��������������������������������������� ����������������������������������>������� ����������������

Corp Logo

Corp Logo

13

Page 14: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

*�')��'�����

*����'

• $������������������8������������ ���

• ��������� ��#��������������8������������������

�������������

• @����������������������C ���������

• ���������C ����� ���������������������

• �-���C ������������������

���' ���

� /�������&$����������8������������������������

� '�����&��������������������� �����������

Advantages: Easy to learn, medium investment, beginning to touch full UX

14

Page 15: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

*�')��'������ ����#�'�

-����-��$�'

� $����� ������������������

� *� @������������������

� D���� ��:��������������

• ������ � ������ �.���� �����������������'����������� ����

15

Page 16: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'�����

*����'

• Define business objectives, users, tasks and key features

• Developed interactive prototype to demonstrate the application functionality including movement and behavior

• Leveraged the prototype to define business requirements

�������������

• �����������������

• $������������'��

• .(039,##�����,����������-

���' ���

� /�������&���8�������=����������������������������� ����

� '�����&�����������������������������������

16

Page 17: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'������ ����#�'�

-����-��$�'

� $����� ������������ ������������������������ �����������������������������������������������������������������������������

� ������ ���������������������������

� *� �'����������>����� �������#E*�����������������

17

Page 18: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'������ ����#�'�

Corp Logo

Corp Logo

18

Page 19: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'������ ����#�'�

-����-��$�'

� $����� ��������� ���������>������� ��

� *� ����,����������������������������������

� /�������� ����-

���������������������������������

19

Page 20: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'������ ����#�'�

20

Page 21: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'������ ����#�'�

21

Page 22: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'������ ����#�'�

22

Page 23: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+�)��'������ ����#�'�

23

Page 24: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+���)������&�����$�����

*����'

• =-��������������� ������������������0�� E���

• ,�� ������������������������

�������������

• #������� ����������������

• 1����������

���' ���

� /�������&#��������������������� �������������������

� '�����&#���������� �����������������������

24

Page 25: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

+���)������&�����$�����

Page 26: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

��������' ���

��)���0�*�(����

• *�������������

• .��������������������������������� ���� ������������������������������-��������

• (��������������������������������������������

$����������������

• =������������ ���9����� ����� ������������ ��������� ������ ������������� (.=�������

• $��F��������� ������������ ��������������

• /���������������������������� ��������� ���������� 44���� ���������������� ��

� Talk to us more about mobile another time. We know how to achieve great mobile user experiences.

• Even after 17 years of doing this, I am still surprised what the users can teach me

• All the things you hope to learn about a new design can only be achieved with highly interactive prototypes, current applications. Visual design preference, content organization, page layout, transaction flow, and overall user experience.

26

Page 27: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

#((���

• (����:������������������� ����������� ���������������

• 3����(������ �������������������������������� ��

� 3���&#����������:������������������� ;��<

� (����&,��������������������;�� <

� ����&#���,�����=-��������;��<

� (�� ����������������������� �������� ����������

POLL: Which is your favorite interactive prototyping tool?•HTML/CSS, Dreamweaver or similar•Photoshop, Fireworks or similar•iRise (is there anything similar to iRise)•Axure•ProtoShare, BalsamIQ or similar•Other

Page 28: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

���������

• @���G$������ �� (����#���

• �����#����G@� ��(�������

• �-���G��� ���(���

• �'��G*���#�������

• ����,������G$�������8���

• ���-G.�����E����*�

• ��������G,�������/�����

Page 29: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

1�������2

Qs: How do you help your team learn the skills they will need to produce interactive prototypes?

Page 30: Creating Realistic User Experiences with Interactive Prototypes

Copyright © 2009 Perficient, Inc PROPRIETARY AND CONFIDENTIAL – UNAUTHORIZED REPRODUCTION PROHIBITED

����������!�������"�����

���������������������

��� ������������� ���� �����������������������������������

���������������������������������������������

������������� �����������������������������

������������������ ������������

� ������������������