![Page 1: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/1.jpg)
IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon
USER INTERFACE DESIGN PATTERNS
![Page 2: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/2.jpg)
PASSWORD STRENGTH INDICATORS
USER INTERFACE DESIGN PATTERNS
![Page 3: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/3.jpg)
UI Pattern #1
The Problem•Hackers are becoming more sophisticated• Some people still use overly simple passwords•Many people don’t know what a good password consists of
Password Strength Indicator
![Page 4: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/4.jpg)
UI Pattern #1
The Solution•When users create a password, add an indicator that can analyze it an tell them how strong the password is and how to make it stronger
Password Strength Indicator
![Page 5: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/5.jpg)
UI Pattern #1 Password Strength Indicator
Pros•Reject weak passwords; increase site security•Allows the user to feel more confident about their password
![Page 6: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/6.jpg)
UI Pattern #1 Password Strength Indicator
Cons•Users can get confused by password requirements•Password may be to complicated for user to remember•Some special characters are difficult to type on mobile devices
![Page 7: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/7.jpg)
UI Pattern #1 Password Strength Indicator
Good ExampleClick here for a good example of a password indicator
![Page 8: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/8.jpg)
UI Pattern #1 Password Strength Indicator
More Good Examples
![Page 9: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/9.jpg)
UI Pattern #1 Password Strength Indicator
Bad Examples
![Page 10: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/10.jpg)
TAGCLOUDS
USER INTERFACE DESIGN PATTERNS
![Page 11: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/11.jpg)
UI Pattern #2
The Problem•Designers need a way to grab the attention of users with a rapidly decreasing attention span• Some sites have large amounts of content and need a way to draw users to more important areas
Tag Clouds
![Page 12: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/12.jpg)
UI Pattern #2
The Solution•Use design elements such as ordering, color and size to attract users according to:
• How many tags a link shares• Amount of content• Popularity
Tag Clouds
![Page 13: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/13.jpg)
UI Pattern #2 Tag Clouds
Pros•Allow more emphasis for popular areas•Easy navigation technique for the user•Easy to update • Lower maintenance than traditional navigation.
![Page 14: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/14.jpg)
UI Pattern #2 Tag Clouds
Cons•Can be confusing•Can cause other areas of the sites to be ignored•Can make it more difficult to find an exact item on the site
![Page 15: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/15.jpg)
UI Pattern #2Tag Clouds
Good ExampleClick here to see a good example of a Tag Cloud
![Page 16: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/16.jpg)
UI Pattern #2Tag Clouds
Interesting ExampleClick here to see an interesting example of a Tag Cloud
![Page 17: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/17.jpg)
UI Pattern #2Tag Clouds
More Good Examples
![Page 18: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/18.jpg)
UI Pattern #2Tag Clouds
Bad Examples
![Page 19: IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS](https://reader035.vdocuments.us/reader035/viewer/2022062302/5a4d1afd7f8b9ab059984d28/html5/thumbnails/19.jpg)
Sources
Password Strength Indicator http://designinginterfaces.com/patterns/password-strength-meter/ http://
www.freshdesignweb.com/10example-jqueryjavasript-password-strength-meter.html
https://accounts.google.com/SignUp?service=mail&continue=https%3A%2F%2Fmail.google.com%2Fmail%2Fca%2F<mpl=default
Tag Clouds http://www.roytanck.com/tag-cloud/ http://wallbase.cc/home http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-ex
amples-and-good-practices/