notes week2, class a

7/29/2019 Notes Week2, class a

1/9

>Mobile Technologies (GPS / AR / RFID / QR)GPS-GlobalPositioningSystem, a worldwideMEOsatellite navigational system-GPS has applications beyond navigation and location determination. GPS can beused for cartography, forestry, mineral exploration, wildlife habitation management,

monitoring the movement of people and things and bringing precise timing to theworld.AR-AugmentedRealityis a type ofvirtual realitythat aims to duplicate the world'senvironment in acomputer. An augmented reality system generates a compositeview for the user that is the combination of the real scene viewed by the user and avirtual scene generated by the computer that augments the scene with additionalinformation. The virtual scene generated by the computer is designed to enhance theuser's sensory perception of the virtual world they are seeing or interacting with.-Today Augmented Reality is used in entertainment, military training, engineeringdesign, robotics, manufacturing and other industries.

RFID-RadioFrequencyIdentification, a technology similar in theory tobar codeidentification. An RFID system consists of an antenna and atransceiver, which readthe radio frequency and transfer the information to a processingdevice, and atransponder, or tag.-RFID systems can be used just about anywhere, from clothing tags to missiles topet tags to food -- anywhere that a unique identification system is needed. The tagcan carry information as simple as a pet owners name and address or the cleaninginstruction on a sweater to as complex as instructions on how to assemble a car.Some auto manufacturers use RFID systems to move cars through an assemblyline. At each successive stage of production, the RFID tag tells the computers whatthe next step of automated assembly is.-One of the key differences between RFID and bar code technology is RFID doesntneed to see anything to scan it, it just knows its there, i.e QRcode on poster vs RFIDtag hidden on back of poster.-High frequency RFID systems (850 MHz to 950 MHz and 2.4 GHz to 2.5 GHz) offertransmission ranges of more than 90 feet, although wavelengths in the 2.4 GHzrange are absorbed by water (the human body) and therefore has limitations.-RFID is also called dedicated short range communication (DSRC).QR Code-QuickResponse code, is a type of two-dimensional (2D)barcodethat can be read

using a QR barcode reader or camera-enabledsmartphonewith QR readersoftware.-QR Codes are popular with mobile phone users as the barcode can be used tostore addresses and URLs. With a camera-enabled smartphone, users can scan theQR Code which has been coded to do things like display text, provide contact dataor even open a webpage in the browser on the smartphone.-QR Codes can be printed and displayed anywhere a mobile phone user might scanthe code such as in a magazine or displayed at a cash register. They can also bedisplayed online.-There are a number of online services that will generate a QR Code based on theinformation you specify when mapping the QR code.

>Phone Interactions
http://www.webopedia.com/TERM/M/MEO.htmlhttp://www.webopedia.com/TERM/M/MEO.htmlhttp://www.webopedia.com/TERM/M/MEO.htmlhttp://www.webopedia.com/TERM/V/virtual_reality.htmlhttp://www.webopedia.com/TERM/V/virtual_reality.htmlhttp://www.webopedia.com/TERM/V/virtual_reality.htmlhttp://www.webopedia.com/TERM/C/computer.htmlhttp://www.webopedia.com/TERM/C/computer.htmlhttp://www.webopedia.com/TERM/C/computer.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/T/transceiver.htmlhttp://www.webopedia.com/TERM/T/transceiver.htmlhttp://www.webopedia.com/TERM/T/transceiver.htmlhttp://www.webopedia.com/TERM/D/device.htmlhttp://www.webopedia.com/TERM/D/device.htmlhttp://www.webopedia.com/TERM/D/device.htmlhttp://www.webopedia.com/TERM/T/transponder.htmlhttp://www.webopedia.com/TERM/T/transponder.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/S/smartphone.htmlhttp://www.webopedia.com/TERM/S/smartphone.htmlhttp://www.webopedia.com/TERM/S/smartphone.htmlhttp://www.webopedia.com/TERM/S/smartphone.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/T/transponder.htmlhttp://www.webopedia.com/TERM/D/device.htmlhttp://www.webopedia.com/TERM/T/transceiver.htmlhttp://www.webopedia.com/TERM/B/bar_code.htmlhttp://www.webopedia.com/TERM/C/computer.htmlhttp://www.webopedia.com/TERM/V/virtual_reality.htmlhttp://www.webopedia.com/TERM/M/MEO.html


2/9

-shaking, tilting, accelerometer, swipe, tap, pinch, zoom, phone vertical/horizontalorientation.

-how can you make the most out of these> User Scenario

-A short story that tell us a users motivation, their goals

and actions on our website.-When writing a user scenario, keep it short and to thepoint.-All info is relevant to the process the user undergoes inorder to reach his or her goal, and nothing more.- Who is the user Im designing for?-What does this user want on my site?-How is this user going to achieve his or her goals?-Why does this user come to my site and not anywhereelse?(ref: Usabilla Blog How user scenarios help to improve

you ux)

>User Flow-How can you navigate through the data?-Make a diagram showing how pages will link up-1-3 levels of depth to your app at most.

> Interface Design for Mobile Devices-A library of ui patterns for web design and development

http://developer.yahoo.com/ypatterns/-Finger: the average width of the index finger is 1.6 to 2 cm (16 20 mm) for mostadults. This converts to 45 57 pixels-Thumb: The average width of an adult thumb is 1 inch (2.5 cm), which converts to72 pixels. (ref:http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)-UI resource linkshttp://pttrns.comhttp://www.lovelyui.comhttp://ui.theultralinx.comhttp://www.mobiletuxedo.com/category/ui-patterns

http://www.1stwebdesigner.com/design/mobile-apps-designshttp://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspirationhttp://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.htmlhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspiration

>10 mistakes to not make-(ref: http://mashable.com/2012/04/11/mobile-app-design-tips/)Developing a functioning and enjoyable mobile app requires discipline andpracticality.

1. Dont Begin Wireframes or Designs Without a Flowmap-Helps to ensure a logical and reasonable

navigational structure.-Make functional screens close to the top
http://developer.yahoo.com/ypatterns/http://en.wikipedia.org/wiki/Finger_(unit)http://pttrns.com/http://www.lovelyui.com/http://ui.theultralinx.com/http://www.mobiletuxedo.com/category/ui-patternshttp://www.1stwebdesigner.com/design/mobile-apps-designshttp://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspirationhttp://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.htmlhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.htmlhttp://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspirationhttp://www.1stwebdesigner.com/design/mobile-apps-designshttp://www.mobiletuxedo.com/category/ui-patternshttp://ui.theultralinx.com/http://www.lovelyui.com/http://pttrns.com/http://en.wikipedia.org/wiki/Finger_(unit)http://developer.yahoo.com/ypatterns/


3/9

rather than buried2. Dont Disregard the Development Budget3. Dont Start With Low Resolutions & Avoid Bitmaps

-Always design for retina, high-res, pixel-dense screens first, then scale down.-Even better: Design with vector graphics rather than scale-challenged bitmaps or

rasterized graphics.4. Dont Undersize The Hit Area

-be sure to always make buttons big enough and spaced enough to be easilytapped by users.-Finger: the average width of the index finger is 1.6 to 2 cm (16 20 mm) for mostadults. This converts to 45 57 pixels-Thumb: The average width of an adult thumb is 1 inch (2.5 cm), which converts to72 pixels.

(ref:http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)

5. Dont Gratuitously Use Intro Animations-Fun little animations when an app first opens can be nice, but dont go overboardwith them.-(PathandThrillists JackThreadshave cool ones)-Bad as they cant begin until the app is loaded. So in effect, they delay the user fromaccessing the app.-make it quick, subtle and appealing enough to be worth the extra second or so thatthe user has to wait.-As an app loads, a still image should display, which then transitions into ananimation. Make sure the transition is seamless.

6. Dont Leave Users Hanging-Make it clear when the app is loading or processing, don't keep your users waitingon a blank screen. while the app is loading web content.-Use loading indicators and animations to give users a heads up that the app isworking, but its just waiting on the phone or the network. A progress indicator iseven better.

7. Dont Blindly Copy Style From Other Operating Systems-iPhone,AndroidandWindows Phone 7have very different aesthetics.i.e, an appon the iPhone that uses the WP7s block-layout and navigation style would beunfamiliar and confusing to users.

8. Dont Overstuff Pixel-Dense Screens

-Remember to preview all your work on the actual device you're designing for, evenif its just a screengrab in the devices photo viewer.-Overstuffing an interface can result in an app that's cluttered and difficult tonavigate.

9. Dont Assume Everyone Will Use Your App The Same Way You Do-Usability testing is a must, no matter how good your app looks.

10. Dont Forget About Gestures, But Dont Abuse Them Either-Keep in mind that not every single element of the interface has to be fully visible oreasy to get to immediately.-i.e. in the Mail app for iPhone, in the inbox view, a user can swipe a message toreveal a delete button. A shortcut that saves the hassle of tapping edit, selecting a

message to delete and then tapping delete. But still make accessible as some usersmay not know about short cut.
http://en.wikipedia.org/wiki/Finger_(unit)https://path.com/https://path.com/https://path.com/http://www.jackthreads.com/mobilehttp://www.jackthreads.com/mobilehttp://www.jackthreads.com/mobilehttp://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.htmlhttp://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.htmlhttp://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.htmlhttp://developer.android.com/guide/practices/ui_guidelines/index.htmlhttp://developer.android.com/guide/practices/ui_guidelines/index.htmlhttp://developer.android.com/guide/practices/ui_guidelines/index.htmlhttp://mashable.com/2012/04/11/mobile-app-design-tips/msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspxhttp://mashable.com/2012/04/11/mobile-app-design-tips/msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspxhttp://mashable.com/2012/04/11/mobile-app-design-tips/msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspxhttp://mashable.com/2012/04/11/mobile-app-design-tips/msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspxhttp://developer.android.com/guide/practices/ui_guidelines/index.htmlhttp://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.htmlhttp://www.jackthreads.com/mobilehttps://path.com/http://en.wikipedia.org/wiki/Finger_(unit)


4/9

ConclusionIf theres a single unifying element to all these design faux pas, its that the best designs arecarefully considered. It comes down to thinking critically and completely about yourmethods. Really think through what your users are trying to achieve and let that inform yourdesigns. Dont cut corners, dont skip testing and dont create designs that you wouldn't put

in your portfolio or use yourself.

>5 Simple Tips for Designing Better iPhone Apps-1. Wireframe Your App

-Awireframeis a simple outline of your app ideathat allows you to work exclusively on theexperience, ignoring the visual aspects.-An apps design comprises of 2 things-1. The UX (user experience) design is decidingwhat features to include, and how the user willaccomplish goals. Usability, accesability,

marketing, system performance, ergonomics.-2. The UI (user interface) design what it lookslike. (Colours, textures, and fonts etc)-Plan how your app features will fit together, what screen the user will encounter first,and how theyll navigate your application.

-Draw buttons, write in text, and especially focus on making the learning processintuitive.-Only start paying attention to style once youre confident that your wireframesrepresent a clean, usable app design.

2. Use Finger-Sized Tap Targets-This is the biggest thing you can do to improve the usability of your app: Increasethe tappable area for every button.-Apple recommends a minimum of44x44px for any element the user is expectedto interact with.-This doesnt mean that the button needs to visually look that big. The tappablearea can extend beyond the visual size of the button.

3. Have Only One Primary Goal Per ScreenOne primary goal 4 the user to accomplish per screen!e.g. in the email list screen in iPhones Mail app, the usersprimary goal is to read emails. Though theres a secondaryaction for composing an email, the button is off in the corner

and not emphasized.-If the goal of that page is to hit a particular button i.e.Complete! make it stand out from everything else on thescreen. Secoundry elements should be subtle so the mainaction is obvious. (Heirarchy!)Helpful links-http://sixrevisions.com/graphics-design/visual-weight-designs/

-Colour, saturation, contrast, lightness/darkness, size, density, complexity &balance/symmetry.-The red heart shape on the left carries a lot more weight as its bigger and itscolor is more vibrant. To attempt to balance the it, there are several objects to

create an area that has more visual complexity.
http://sixrevisions.com/mobile/design-iphone-apps-better/http://sixrevisions.com/mobile/design-iphone-apps-better/http://sixrevisions.com/user-interface/website-wireframing/http://sixrevisions.com/user-interface/website-wireframing/http://sixrevisions.com/user-interface/website-wireframing/http://moobileframes.tumblr.com/post/18381747048/iphone-wireframes-created-using-wireframesketcherhttp://moobileframes.tumblr.com/post/18381747048/iphone-wireframes-created-using-wireframesketcherhttp://sixrevisions.com/user-interface/website-wireframing/http://sixrevisions.com/mobile/design-iphone-apps-better/


5/9

-Use colour to create hierarchy - Arranged from heaviest to lightest:Red (heaviest) >Blue >Green >Orange >Yellow (lightest)-In the physical world, denser (or more compact) objects are heavier than lessdense, more dispersed objects. We can achieve this concept in graphicalrepresentations by using less whitespace between objects.

-Creating Focal Points in Your Web Design(ref: http://sixrevisions.com/web_design/creating-focal-points/)-Use typography to create heirarchy

- Use buttons to create a focal point- Use graphics/illustrations for hierarchy (dont over use)
http://sixrevisions.com/web_design/creating-focal-points/http://sixrevisions.com/web_design/creating-focal-points/http://sixrevisions.com/web_design/creating-focal-points/http://sixrevisions.com/web_design/creating-focal-points/


6/9

-Use white space to create a focal point-Use decoration to create a focal point

(ref for below: http://sixrevisions.com/web_design/using-power-structure-and-gestalt-for-visual-hierarchy/)-Use continuation to create a focal point

-Use similarity to create all items in a menu have the same hierarchy & to easily see theyare a menu. You can make everything on a page similar and then one not to make it aheirarch.-Use Contrast to create hierarchy


7/9

The Art of Distinction in Web Design- & this one http://sixrevisions.com/web_design/the-art-of-distinction-in-web-

design/

4. Avoid Default Button Styles-Unless you have a very boring design style for your app, chances are, the defaultbutton styles wont match. Customizing the look of buttons to match your UI willmake a huge difference and keep you from looking like an amateur app designer.

-You can either set the button style to Custom and include a background image,

or you can draw a new button style with code.-There are plenty of tutorials and resources that will help you create great lookingbuttons. Take a look at both of these resources:

-Designing Buttons iOS 5(http://nathanbarry.com/designing-buttons-ios5/)-UIButton Glossy (https://github.com/GeorgeMcMullen/UIButton-Glossy)

5. Add Extra Views When Theres a Lot of Information-Moving into a new view (either through a push or modal transition) is very easy

for the user. So if you find yourself trying to add too much information to a singleview, then just add another view.-In the New Contactview, selecting a ringtone pushes/slides you to a new viewcalled Ringtones that displays the list of available ringtones you can assign to that

new contact. -Tapping a phone number label brings up a modal dialog with otherlabel options (called Label).
http://sixrevisions.com/web_design/the-art-of-distinction-in-web-design/http://sixrevisions.com/web_design/the-art-of-distinction-in-web-design/http://sixrevisions.com/web_design/the-art-of-distinction-in-web-design/http://nathanbarry.com/designing-buttons-ios5/http://nathanbarry.com/designing-buttons-ios5/http://nathanbarry.com/designing-buttons-ios5/https://github.com/GeorgeMcMullen/UIButton-Glossyhttps://github.com/GeorgeMcMullen/UIButton-Glossyhttps://github.com/GeorgeMcMullen/UIButton-Glossyhttps://github.com/GeorgeMcMullen/UIButton-Glossyhttp://nathanbarry.com/designing-buttons-ios5/http://nathanbarry.com/designing-buttons-ios5/http://sixrevisions.com/web_design/the-art-of-distinction-in-web-design/http://sixrevisions.com/web_design/the-art-of-distinction-in-web-design/http://sixrevisions.com/web_design/the-art-of-distinction-in-web-design/


8/9

By adding extra screens, you can avoid confusing your users with too many clutteredelements by only showing the information they request (a concept known asprogressive disclosure).

>Layout

-Main menu at bottom, always visible-Secoundry elements, sub menus, back/fwd buttons & change view buttons shouldbe placed up the top.-When/how does the keyboard pop up? When entering addy for map?-1-3 levels of depth to your app at most.-Rolling/swipe scroll menu down side if a big list of info

Key-terms:

usability principlesaudience and user (pro-d-user) considerationsmobile UI patterns & elementsUI / UXHOMEWORK > Ideation / Mind map / Concept Development / Define your App? > DevelopUser Scenario & User Flow

LINKS-App Inspiration

http://patterntap.com/search/mobile-A library of ui patterns for web design and development

http://developer.yahoo.com/ypatterns/-4 Elements That Make A Good User Experience Into Something Great

(ref:http://www.fastcodesign.com/1669048/4-elements-that-make-a-good-user-experience-into-something-great)-nokia the future of nanotechnology & Siri for iPhone 4S by Apple -dialoguebetween human and machinehttp://www.blendingpoint.com/the-b/the-future-of-mobile-experience/

-UI resource linkshttp://pttrns.comhttp://www.lovelyui.com

http://ui.theultralinx.comhttp://www.mobiletuxedo.com/category/ui-patterns
http://sixrevisions.com/user-interface/progressive-disclosure-in-user-interfaces/http://patterntap.com/search/mobilehttp://developer.yahoo.com/ypatterns/http://ttp//www.fastcodesign.com/1669048/4-elements-that-make-a-good-user-ehttp://ttp//www.fastcodesign.com/1669048/4-elements-that-make-a-good-user-ehttp://pttrns.com/http://www.lovelyui.com/http://ui.theultralinx.com/http://www.mobiletuxedo.com/category/ui-patternshttp://www.mobiletuxedo.com/category/ui-patternshttp://ui.theultralinx.com/http://www.lovelyui.com/http://pttrns.com/http://ttp//www.fastcodesign.com/1669048/4-elements-that-make-a-good-user-ehttp://ttp//www.fastcodesign.com/1669048/4-elements-that-make-a-good-user-ehttp://developer.yahoo.com/ypatterns/http://patterntap.com/search/mobilehttp://sixrevisions.com/user-interface/progressive-disclosure-in-user-interfaces/


9/9

http://www.1stwebdesigner.com/design/mobile-apps-designshttp://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspirationhttp://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.htmlhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspiration

-Designing a Mobile App? Don't Make These 10 Mistakes;-http://mashable.com/2012/04/11/mobile-app-design-tips

-5 Simple Tips for Designing Better iPhone Apps;-http://sixrevisions.com/mobile/design-iphone-apps-better
http://www.1stwebdesigner.com/design/mobile-apps-designshttp://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspirationhttp://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.htmlhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://mashable.com/2012/04/11/mobile-app-design-tips/http://sixrevisions.com/mobile/design-iphone-apps-better/http://sixrevisions.com/mobile/design-iphone-apps-better/http://mashable.com/2012/04/11/mobile-app-design-tips/http://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-design-inspirationhttp://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.htmlhttp://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspirationhttp://www.1stwebdesigner.com/design/mobile-apps-designs

notes week2, class a

Documents