>Mobile Technologies (GPS / AR / RFID / QR) GPS -Global Positioning System, a worldwide MEO satellite navigational system -GPS

has applications beyond navigation and location determination. GPS can be used for cartography, forestry, mineral exploration, wildlife habitation management, monitoring the movement of people and things and bringing precise timing to the world. AR -Augmented Reality is a type of virtual reality that aims to duplicate the world's environment in a computer. An augmented reality system generates a composite view for the user that is the combination of the real scene viewed by the user and a virtual scene generated by the computer that augments the scene with additional information. The virtual scene generated by the computer is designed to enhance the user's sensory perception of the virtual world they are seeing or interacting with. -Today Augmented Reality is used in entertainment, military training, engineering design, robotics, manufacturing and other industries. RFID -Radio Frequency Identification, a technology similar in theory to bar code identification. An RFID system consists of an antenna and a transceiver, which read the radio frequency and transfer the information to a processing device, and a transponder, or tag. -RFID systems can be used just about anywhere, from clothing tags to missiles to pet tags to food -- anywhere that a unique identification system is needed. The tag can carry information as simple as a pet owners name and address or the cleaning instruction 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 assembly line. At each successive stage of production, the RFID tag tells the computers what the next step of automated assembly is. -One of the key differences between RFID and bar code technology is RFID doesnt need to see anything to scan it, it just knows its there, i.e QRcode on poster vs RFID tag hidden on back of poster. -High frequency RFID systems (850 MHz to 950 MHz and 2.4 GHz to 2.5 GHz) offer transmission ranges of more than 90 feet, although wavelengths in the 2.4 GHz range are absorbed by water (the human body) and therefore has limitations. -RFID is also called dedicated short range communication (DSRC). QR Code -Quick Response code, is a type of two-dimensional (2D) barcode that can be read using a QR barcode reader or camera-enabled smartphone with QR reader software. -QR Codes are popular with mobile phone users as the barcode can be used to store addresses and URLs. With a camera-enabled smartphone, users can scan the QR Code which has been coded to do things like display text, provide contact data or even open a webpage in the browser on the smartphone. -QR Codes can be printed and displayed anywhere a mobile phone user might scan the code such as in a magazine or displayed at a cash register. They can also be displayed online. -There are a number of online services that will generate a QR Code based on the information you specify when mapping the QR code. >Phone Interactions

-shaking, tilting, accelerometer, swipe, tap, pinch, zoom, phone vertical/horizontal orientation. -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 the point. -All info is relevant to the process the user undergoes in order 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 anywhere else? (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 most adults. This converts to 45 57 pixels -Thumb: The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels. (ref:http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendlydesign-ideal-mobile-touchscreen-target-sizes/) -UI resource links http://pttrns.com http://www.lovelyui.com http://ui.theultralinx.com http://www.mobiletuxedo.com/category/ui-patterns http://www.1stwebdesigner.com/design/mobile-apps-designs http://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspiration http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html http://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-designinspiration >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 and practicality. 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

rather than buried 2. Dont Disregard the Development Budget 3. 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 easily tapped by users. -Finger: the average width of the index finger is 1.6 to 2 cm (16 20 mm) for most adults. This converts to 45 57 pixels -Thumb: The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels. (ref:http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-designideal-mobile-touchscreen-target-sizes/) 5. Dont Gratuitously Use Intro Animations -Fun little animations when an app first opens can be nice, but dont go overboard with them. -(Path and Thrillists JackThreads have cool ones) -Bad as they cant begin until the app is loaded. So in effect, they delay the user from accessing the app. -make it quick, subtle and appealing enough to be worth the extra second or so that the user has to wait. -As an app loads, a still image should display, which then transitions into an animation. 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 waiting on a blank screen. while the app is loading web content. -Use loading indicators and animations to give users a heads up that the app is working, but its just waiting on the phone or the network. A progress indicator is even better. 7. Dont Blindly Copy Style From Other Operating Systems -iPhone, Android and Windows Phone 7 have very different aesthetics. i.e, an app on the iPhone that uses the WP7s block-layout and navigation style would be unfamiliar and confusing to users. 8. Dont Overstuff Pixel-Dense Screens -Remember to preview all your work on the actual device you're designing for, even if its just a screengrab in the devices photo viewer. -Overstuffing an interface can result in an app that's cluttered and difficult to navigate. 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 or easy to get to immediately. -i.e. in the Mail app for iPhone, in the inbox view, a user can swipe a message to reveal 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 users may not know about short cut.

Conclusion If theres a single unifying element to all these design faux pas, its that the best designs are carefully considered. It comes down to thinking critically and completely about your methods. Really think through what your users are trying to achieve and let that inform your designs. 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 -A wireframe is a simple outline of your app idea that allows you to work exclusively on the experience, ignoring the visual aspects. -An apps design comprises of 2 things -1. The UX (user experience) design is deciding what features to include, and how the user will accomplish goals. Usability, accesability, marketing, system performance, ergonomics. -2. The UI (user interface) design what it looks like. (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 process intuitive. -Only start paying attention to style once youre confident that your wireframes represent 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: Increase the tappable area for every button. -Apple recommends a minimum of 44x44px for any element the user is expected to interact with. -This doesnt mean that the button needs to visually look that big. The tappable area can extend beyond the visual size of the button. 3. Have Only One Primary Goal Per Screen One primary goal 4 the user to accomplish per screen! e.g. in the email list screen in iPhones Mail app, the users primary goal is to read emails. Though theres a secondary action 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 the screen. Secoundry elements should be subtle so the main action 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 its color is more vibrant. To attempt to balance the it, there are several objects to create an area that has more visual complexity.

-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 less dense, more dispersed objects. We can achieve this concept in graphical representations 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)

-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-gestaltfor-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 they are a menu. You can make everything on a page similar and then one not to make it a heirarch. -Use Contrast to create hierarchy

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

4. Avoid Default Button Styles -Unless you have a very boring design style for your app, chances are, the default button styles wont match. Customizing the look of buttons to match your UI will make 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 looking buttons. 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 single view, then just add another view. -In the New Contact view, selecting a ringtone pushes/slides you to a new view called 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 other label options (called Label).

By adding extra screens, you can avoid confusing your users with too many cluttered elements by only showing the information they request (a concept known as progressive disclosure). >Layout -Main menu at bottom, always visible -Secoundry elements, sub menus, back/fwd buttons & change view buttons should be 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 principles audience and user (pro-d-user) considerations mobile UI patterns & elements UI / UX HOMEWORK > Ideation / Mind map / Concept Development / Define your App? > Develop User 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-userexperience-into-something-great) -nokia the future of nanotechnology & Siri for iPhone 4S by Apple -dialogue between human and machine http://www.blendingpoint.com/the-b/the-future-of-mobile-experience/ -UI resource links http://pttrns.com http://www.lovelyui.com http://ui.theultralinx.com http://www.mobiletuxedo.com/category/ui-patterns

http://www.1stwebdesigner.com/design/mobile-apps-designs http://thedesigninspiration.com/articles/25-mobile-app-ui-designs-for-inspiration http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html http://speckyboy.com/2011/07/27/40-dribbble-shots-for-mobile-and-ui-app-designinspiration -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