[PU&D] - The ultimate guide to UX design in PowerApps apps Michał Guzowski

1. 03.04.2020
12.09.2020
#
2020
#
The ultimate guide to UX
design in PowerApps apps
Michael Guzowski

2. Join us on September 12
… and let’s celebrate 5th Anniversary!
SPS Warsaw Team
Tomek, Edyta, Marcin

3. 03.04.2020
12.09.2020
#
Sponsors and Partners

4. 03.04.2020
12.09.2020
#
Alex Wilber

5. 03.04.2020
12.09.2020
#

6. 03.04.2020
12.09.2020
#

7. 03.04.2020
12.09.2020
#

8. 03.04.2020
12.09.2020
#

9. 03.04.2020
12.09.2020
#

10. 03.04.2020
12.09.2020
#

11. 03.04.2020
12.09.2020
#

12. 03.04.2020
12.09.2020
#

13. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

14. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

15. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

16. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

17. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

18. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

19. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

20. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

21. 03.04.2020
12.09.2020
#
App UX sins:
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea

22. 03.04.2020
12.09.2020
#
Does it matter?

23. 03.04.2020
12.09.2020
#
Does it matter?
https://www.mckinsey.com/busi
ness-functions/mckinsey-
design/our-insights/the-business-
value-of-design

24. 03.04.2020
12.09.2020
#
1. Strong correlation between high
MDI scores and superior business
performance
2. The results held true in all three of
the industries MsKinsey looked
at: medical technology, consumer
goods, and retail banking.
3. TRS and revenue differences
between the fourth, third, and
second quartiles were marginal.

25. 03.04.2020
12.09.2020
#
1. Strong correlation between high
MDI scores and superior business
performance
2. The results held true in all three of
the industries MsKinsey looked
at: medical technology, consumer
goods, and retail banking.
3. TRS and revenue differences
between the fourth, third, and
second quartiles were marginal.

26. 03.04.2020
12.09.2020
#
1. Strong correlation between high
MDI scores and superior business
performance
2. The results held true in all three of
the industries MsKinsey looked
at: medical technology, consumer
goods, and retail banking.
3. TRS and revenue differences
between the fourth, third, and
second quartiles were marginal.
Questions?

27. 03.04.2020
12.09.2020
#
Fresh
Productive
Simple | Ordered | Intuitive
Pyramid of UX design focus

28. 03.04.2020
12.09.2020
#
Fresh
Productive
Simple | Ordered | Intuitive

29. 03.04.2020
12.09.2020
#
This Photo by Unknown Author is licensed under CC BY-SA-NC

30. 03.04.2020
12.09.2020
#
Abraham Maslow
This Photo by Unknown Author is licensed under CC BY-SA-NC

31. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

32. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

33. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

34. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

35. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

36. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

37. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?
Lower Price

38. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?
Lower Price
Price or Quality?

39. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?

40. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?

41. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?

42. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?

43. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?

44. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?

45. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
Higher Quality
Lower Price
Does the car equipment is more important for
you than the price you would need to pay for a
day usage when renting a company car?

46. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

47. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

48. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

49. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

50. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

51. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

52. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

53. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

54. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

55. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

56. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

57. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

58. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

59. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

60. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

61. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

62. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

63. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

64. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

65. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

66. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
by Nitish Khagwal in Interaction Design (IxD)

67. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
by Nitish Khagwal in Interaction Design (IxD)

68. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

69. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsFeedback

70. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsFeedback

71. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

72. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback

73. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
• Productive
• Scanning > Reading
• Keep low CTTCR
(Clicks to Task
Complition Rate)

74. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
• Productive
• Scanning > Reading
• Keep low CTTCR
(Clicks to Task
Complition Rate)

75. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
• Productive
• Scanning > Reading
• Keep low CTTCR
(Clicks to Task
Complition Rate)
by Tomi Lukan in Daily UI Challenge

76. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
• Productive
• Scanning > Reading
• Keep low CTTCR
(Clicks to Task
Complition Rate)

77. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
• Productive
• Scanning > Reading
• Keep low CTTCR
(Clicks to Task
Complition Rate)
Scrollable screen Extra screen

78. 03.04.2020
12.09.2020
#• Simple
• Build the context
• Use space
• Ordered
• Gestalt Principles
• Proximity
• Similarity
• Continuity
• Closure
• Connection
• Intuitive
• Follow patternsF
• Feedback
• Follow patterns:
"ok/save" on the same
side
• Colors - use your
company colors
• Feedback
• Productive
• Scanning > Reading
• Keep low CTTCR
(Clicks to Task
Complition Rate)
Scrollable screen Extra screen

79. 03.04.2020
12.09.2020
#
Examples

80. 03.04.2020
12.09.2020
#

81. 03.04.2020
12.09.2020
#

82. 03.04.2020
12.09.2020
#

83. 03.04.2020
12.09.2020
#

84. 03.04.2020
12.09.2020
#

85. 03.04.2020
12.09.2020
#

86. 03.04.2020
12.09.2020
#
Summary

87. 03.04.2020
12.09.2020
#
UX Sins
1. Lack of context
2. Misleading information
3. Unclear design
4. Information overload
5. No tests with end-users
6. Inconsistent design
7. Increased error prone
8. Just a bad idea
UX Remedies
1. Simple (context, space)
2. Ordered (Gestalt principles:
Proximity, Similarity,
Continuity, Closure,
Connection
3. Intuitive (Follow patterns,
give feedback)
4. Productive (Scanning, Low
CTTCR)

88. 03.04.2020
12.09.2020
#
Empathy

89. 03.04.2020
12.09.2020
#

90. 03.04.2020
12.09.2020
#

91. 03.04.2020
12.09.2020
#
Resources
• Books
• Design Patterns - O'Reilly
• Information Architecture - O'Reilly
• Conversations that win the complex sale - Erik Peterson and Timothy Riesterer
• WWW sites with design inspirations
• UI Movement
• Collect UI
• UI Garage
• Little Big Details
• Mobile Patterns
@michaelguzowski
www.michalguzowski.pl
www.akademiaaplikacji.pl

92. 03.04.2020
12.09.2020
#
We are doing this for the first time 
We’d love to hear you feedback!
http://bit.ly/SPSWarsaw2020Online_Survey

93. 03.04.2020
12.09.2020
#
03.04.2020
12.09.2020
#
Thank you!
Meet us in-person on September, 12th at Polish Microsoft’s Office!