Designing Mobile User Experiences 11) Input & Entry Resources

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

Yahoo Tutorial This tutorial aims to quickly cover some of the basic elements of web based using Yahoo - a free service Use the Index.
Gmail Tutorial This tutorial aims to quickly cover some of the basic elements of web based using Gmail - a free service Use the Index on the.
SOCIAL NETWORKING APP FACEBOOK. WHAT IS FACEBOOK Facebook was created in 2004 by Mark Zuckerburg and was first used on computers. It was one of the first.
Internet Research Finding Free and Fee-based Obituaries Online.
Computer Settings and Printing Tips Pennsylvania’s Protection From Abuse Database.
Hotmail Tutorial This tutorial aims to quickly cover some of the basic elements of web based using msn Hotmail - a free service Use the Index.
Scottish Legal Aid Board Content Management using OpenCms Martin Spinks CTO Navyblue Tuesday, March 16, 2010.
How to Download and Install a Sharp Print Driver on a Mac.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
CS378 - Mobile Computing App Project Overview. App Project Teams of 2 or 3 students Develop an Android application of your choosing subject to instructor.
The 3 Step Funnel. It’s All About the Cheese Give something of value in exchange for their address Make it clear what the value is QUICKLY Make.
Saturday, 03 October 2015 PowerPoint Tips 4 Click your level above smart smarter smartest Press escape on the keyboard to close this presentation. Interactivity.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links.
Instructional Guide. How does EasyBib make research easier? Citation Generation Easily create a bibliography in MLA, APA, and Chicago styles Export to.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
HTML Concepts and Techniques Fifth Edition Chapter 6 Using Frames in a Web Site.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Things you should have with you: Your own address Student addresses Ideas that you want to include.
 When you receive a new you will be shown a highlighted in yellow box where your can be found  To open your new just double click.
Videos, the More Tag, Permalinks, and Shortlinks.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
January 2006Colby College ITS Setting Up Course Pages.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
Working with ASP.NET Controls What is ASP.NET Using server controls in your pages Allowing users to create their own accounts Creating a login page Letting.
Online Job Applications Workshop Coordinators Sharon Feeney – Andrea Reynolds –
1. Begin Quick Start 2. Administration 3. Good to Know 4. Slightly Technical 5. User Experience 6. You are ready to go !
Unit 4 Working with data. Form Element HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons,
TechKnowlogy Conference August 2, 2011 Using GoogleDocs for Collaboration.
Hyperlinks Links for Other Pages. Hyperlink (aka Link) Text (or image) user can click Takes user to different location In general, location can be: On.
Classroom Wiki Tutorial EDIC 763 Instructional Design Fall 2011 Aysha Bajabaa Dr. Gary Whitt 1 NextBack.
1 April 14, Starting New Open Source Software Projects William Cohen NCSU CSC 591W April 14, 2008.
Testing and delivery Web design principles. Web development is software development.
Emdeon Office Batch Management Services This document provides detailed information on Batch Import Services and other Batch features.
MicrosoftTM SharePoint Content Management SystemTutorial
TIMING/VIDEO Remove auto-advancing after creating a video version:
ICE Integrated Cloud Environment Cloud Scanning and Mobile Printing
Social Media Security: Understanding how to keep yourself safe.
Managing a Project User Documentation.
Weebly Elements, Continued
Weebly Elements, Continued
Data Virtualization Tutorial… OAuth Example using Google Sheets
TIMING/VIDEO Remove auto-advancing after creating a video version:
MUG Tuesday, May 31, 2016.
Designing Mobile User Experiences 13) Design at Scale Resources
Lesson 1: Buttons and Events – 12/18
Uninstall Bitdefender Mobile Security & Antivirus Give a Ring on: Bitdefender Customer Support Service.
Multi-host Internet Access Portal (MIAP) Enhancement Guide
Swipe to Donate Life.
How to Register on Active Orders Trading Grid Company Registration
TIMING/VIDEO Remove auto-advancing after creating a video version:
Explain what touch develop is to your students:
Web Programming– UFCFB Lecture 3
PowerPoint Basics Eric Prebys.
Designing Mobile User Experiences 13) Design at Scale Assignment
TIMING/VIDEO Remove auto-advancing after creating a video version:
TIMING/VIDEO Remove auto-advancing after creating a video version:
TIMING/VIDEO Remove auto-advancing after creating a video version:
TIMING/VIDEO Remove auto-advancing after creating a video version:
Inside a PMI Online Course
TIMING/VIDEO Remove auto-advancing after creating a video version:
Word 2007 – Tips and Techniques
Designing Mobile User Experiences 11) Input & Entry Assignment
TIMING/VIDEO Remove auto-advancing after creating a video version:
TIMING/VIDEO Remove auto-advancing after creating a video version:
MyLion Registration Website | Mobile device
TIMING/VIDEO Remove auto-advancing after creating a video version:
TIMING/VIDEO Remove auto-advancing after creating a video version:
How to give Student Voice Surveys
Presentation transcript:

Designing Mobile User Experiences 11) Input & Entry Resources TIMING/VIDEO Remove auto-advancing after creating a video version: On/Off: In the tabs (not menu): “Slide Show” [X] Play Narrations [X] Use Timings [ ] Show Media Controls Clear the timings completely: Select all the slides Right click a slide > “Slide Transition…” In the “Advance slide” section uncheck “Automatically after” Designing Mobile User Experiences 11) Input & Entry Resources @shoobe01 4ourth.com

Input & Entry Read More: There are a number of best practices for forms. There’s a lot to learn about all the input types, but don't get caught up in the details. Just try to think about the principles, and most of all how to avoid entry entirely.

Mobile Inline Form Validation http://www.uxmatters.com/mt/archives/2012/09/mobile-inline-form-validation.php If you have a form, there are some really simple, well-proven methods for them to work better, and this is my input on getting forms to work on mobile. That said, I hardly ever use these guidelines. Not that they are wrong, just that I avoid form-like input so much it never comes up. See?

Good practices for mobile forms http://applidium.com/en/news/good_practices_for_mobile_forms/ Someone else’s rather good article, with lots of images and real-world examples, of how to make good forms. It also mostly tries to avoid them entirely, so now you know it’s not just me. The keyboard can be a major source of frustration for users, here are some tips to limit its use in a mobile context. Use mainly action buttons, native gestures (tap, swipe) and native features (tap-to-call, GPS, camera).

The Problem with Password Masking https://www.schneier.com/blog/archives/2009/06/the_problem_wit_2.html Bruce Schneier is the man on technical security. If you do anything with security, authentication, etc. you should read his blog religiously. Shoulder surfing isn't very common, and cleartext passwords greatly reduces errors. It has long annoyed me when I can't see what I type: in Windows logins, in PGP, and so on.

Hide/Show Passwords https://storify.com/lukew/hide-show-passwords Luke Wroblewski has long been championing not masking passwords, or more often a show/hide method outlined here. Most usefully for you, these techniques are used all over the place, and in very large scale, not just for the latest cool app. I even contributed some of the numbers of millions of users working with a masking free system at a large telecom. No problems. If you can’t sell your management on this being secure and usable, it’s time to move on.

Better Numerical Inputs for Mobile Forms http://bradfrostweb.com/blog/mobile/better-numerical-inputs-for-mobile-forms/ I will never stop ranting about a “flight number” field that pulls up the full keyboard. Don’t do that. Give people the right input method. Yes, even on the Web this works! Detailed, but easy to follow technical discussion of it here from Brad Frost.

Managing the Keyboard https://developer.apple.com/Library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html Official Apple documentation about using the right input method (pulling up the right keyboard really) for your inputs.

Input Controls http://developer.android.com/guide/topics/ui/controls.html Brief Google page on options for input controls. Google and Apple have many more discussions of inputs on the developer side, but I think you need to start with these so you even know what to look for.

Maybe we could tone down the JavaScript https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/ On page bloat and bad behavior from needless javascript, especially inputs: There’s no good reason for any of this. These aren’t cutting-edge interactive applications; they’re pages with text on them. We used to print those on paper, but as soon as we made the leap to computers, it became impossible to put words on a screen without executing several megabytes of custom junk? I try to avoid this by actually specifying in design that things like form elements are plain, vanilla form elements. I don’t know why, but front end code has gotten weird and hacky lately, as well-described in this article.

Designing for Touch http://developer.android.com/reference/android/widget/TextView.html For example, this page which outlines all the types of input, and attributes you can set the input fields to. Lots of neat stuff. Skim this when you have time and you may find something awesome you can use. Controls whether links such as urls and email addresses are automatically found and converted to clickable links. If set, specifies that this TextView has a textual input method and automatically corrects some common spelling errors. Determines the minimum type that getText() will return. If set, specifies that this TextView has a textual input method and should automatically capitalize what the user types. Makes the cursor visible (the default) or invisible…