Blog

Lecture Notes

Week 3- Article Analysis

What Everyone Should Know About the Process Behind App Design, by Michael Flarup notes and analysis.

 

Idea:

 

  • Flarup (2016) notes that designers should allow an idea to be versatile, meaning, giving it a chance to change and evolve to potentially something better.
  • Flarup (2016) recommends the following questions to be asked of oneself when designing apps: Is this idea financially viable? How sure are you that you can reward an investment? Is this idea technically feasible? Can this be made? Who should make it? How would we go about making it? What sort of tools do we use? What sort of data/API/touch points do we need? What are the obstacles facing the implementation of the idea? Is someone else already doing this?
  • These questions differ upon each idea, but basically the idea phase involves open minded thinking and an honest approach.
  • Idea workshops are an effective way of evolving an idea.

 

Spec:

 

  • The Spec process is the blueprint for an app and Flarup believes this part of the process is a must.
  • A spec enables an idea to be improved and sets the tone for the project.
  • A spec keeps everyone involved in tune and up to date with the process and any developments that have ensued.
  • A program such as word, or pages is sufficient for this phase of the process.

 

Wireframe:

 

  • Wireframes can be part of the spec or built from the spec.
  • Information Architects (iA’s) and User Experience Designers (UX designers) are the usual beneficiaries of this phase and it’s important to discuss as a team, the apps structure.
  • Drawing on knowledge of paradigms, as well as the target audience and overall goal of the app, is essential during the wire framing process.
  • Wireframes usually begin in the form of a sketch before being implemented into software programs such as Omnigraffle, Sketch, or Photoshop.
  • Wireframes act as the first deliberate design of a project and identifies inconsistencies missed during the spec process.
  • You have to be specific about what you want and how it could potentially get done.

 

wireframe-4
AppFuturea (N.D). Wireframe. Graphic. Retrieved from: http://www.appfutura.com                          

 

Prototype:

 

  • The goal of prototyping is to test your hypotheses and gather feedback during development.
  • Software such as Invision or Marvel helps convert mockups into a simple app that allows you to critique the design.
  • Different apps and situations make the prototyping phase relative, meaning different circumstances shape how this step is performed.
  • The most important part of prototyping, is attaining early validation into an idea and figuring out any flaws before investing too much time in the following steps.

 

Visual Design:

 

  • This step involves working towards ensuring there is an identifiable visual language throughout the app.
  • The goal is to not only communicate the branding within the app, but to make the experience enjoyable.
  • “Great visual design elevates the mundane, clarifies the unclear and leaves a lasting impression with the user.”
  • A designer can establish a set of rules and conventions and apply these to each aspect of the app to ensure consistency.
  • This step is a constantly evolving process.

Development:

 

  • This step should involve developers and designers.
  • Different expertise from different professions offers different insight to the process, with developers providing insight to designers and vice versa.

 

Iterate:

 

  • Designing an app is rarely a consistent process and differs depending on the circumstances.
  • Start with an idea, write it down, build a prototype and embrace the relationship between design and development.
  • An app is never finished, and throughout the development phases, a combination of numerous profession and expertise helps it find its identity. 

 

Reference:

 

Flarup, M. (2016). What Everyone Should Know About The Process Behind App Design –    Smashing Magazine. Smashing Magazine. Retrieved 8 March 2017, from https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/

 

Lecture Notes

Week 2 Lecture: App Design and Development Process-Prototyping

Many designers start on print design projects, then move forward to utilizing websites learning concepts related interactive design and user experience.

New devices such as smart watches, mean app designers must continually learn new paradigms. Since the arrival of the internet and computers, users weren’t just spectator like many were with print ads, but, interactors.  Many website design paradigms came from print.

lean-ux-product-stewardship-integrated-teams-8-728.jpg
J, Aldor & T, Cooper (2011) Lean UX Cycles (Visual Graphic). Retrieved from: https://image.slidesharecdn.com/delux-mccoy-110214115644-phpapp01/95/lean-ux-product-stewardship-integrated-teams-8-728.jpg?cb=1298205207

The lecture juxtaposes the change of design within Apple’s websites from their 1997 webpages, to their current ones. We can understand the importance of hierarchy with the modern Apple page, rather than the long text of hyperlinks.

 

Adapting to the world of app design:

 

  1. Change the way you work:

 

  • The work cycle must be quick from idea, to launch.
  • Starting with sketching is the most effective way to get the flow and basic interface aspects of an app sorted first without getting distracted. Ginsburg (2010) furthers this notion by believing it is essential to begin the process with sketches rather than software, to avoid distraction and stick to solving the original problem, as mentioned also in the lecture.
  • Sticking to smaller screens (mobile) first then moving onto larger screens such as a tablet is recommended.
  1. Understand Development

 

  • Learn to use development tools and understand basic development concepts
  • Learn appropriate terminology.

 

  1. Use a Variety of Operating Systems

 

  • It is essential to familiarize yourself as a designer to numerous operating systems (Android & Windows Mobile), not just IOS.
  • Tabs are used differently within each operating system. Banga and Weinfold (2014) stress the importance of not replicating an app detail for detail when converting an app to a new operating system, particularly if the original design was tailored specifically to one operating system.

 

  1. Prototype Everything

 

  • Understanding how something will look and function before implementing.
  • A prototype must do more than just show a static design, it has to also include images, transitions and gestures.
  • Prototyping apps allows for realistic drafts, offering an honest depiction of what the final product will be, which is handy when delivering drafts or mockups to clients (Alton, 2014).

 

  1. What you see is not always what you get

 

  • Testing is imperative for different platforms.

 

  1. Apps are never finished

 

  • Designers must be willing to continually improve and evolve apps and websites.
  • The truth is discovered through usability tests and figuring out what’s wrong and detecting problems in order to improve.

 

References

 

Alton, L. (2014). Understanding The Importance Of Prototyping Apps. Digitalist Magazine. Retrieved 8 March 2017, from http://www.digitalistmag.com/technologies/mobile-applications/2014/08/19/understanding-the-importance-of-prototyping-apps-01299518

 

Banga, C. & Weinhold, J. (2014). Essential mobile interaction design (1st ed., pp. 53-56). Upper Saddle River, NJ: Addison-Wesley.

 

Ginsburg, S. (2011). Designing the iPhone user experience : a user-centered approach to sketching and prototyping iPhone apps (1st ed.).

Classwork

Mapping Western App User Flow

Potential Categories for the Western App:

 

Campus Life:

Maps, Emergency, Events, Shuttle, Residences, Help, Food

 

Social Life:

clubs, directory, social, sport

 

Resources:

Library, books, videos, news, careers, Gradlife, My IT

 

 

User Experience (UX) Flow

A student wishes to grab some food on the Parramatta South campus at WSU. The following wire framing depicts the user flow experience.

western-user-flow_1.png
Classwork-Week 2 and 3

 

Lecture Notes

Week 1: What is an app?

What is an app?

An app, abbreviated for “application” has three main identities in the mobile spectrum:

  1. Web App HTML: Responsive, delivered via a browser interface.
  2. Hybrid: Embed a mobile site inside a web app, essentially combining native apps and HTML 5 apps.
  3. Native: Applications that don’t need internet access and are platform dependent. The lecture cites Photoshop as an example of a native app.
types-of-apps-1.png
Enter a caption

Figure 1 Deshsoft (N.D) “Types of Apps”. Graphic. Retrieved from: http://deshsoft.com/mobile-apps-development/

Native vs HTML 5:

 

A debate has ensued during the current decade between app developers over the effectiveness of each type. HTML5 is considered by many the more efficient of the two, as HTML5 designs allowed a durable experience via browsers, were aligned to already existing professions and they are generally more cost conservative than native apps. Stark, Jepson & Macdonald (2012), affirm some of the cons of native apps by revealing that native apps are often time consuming (in terms of idea formulation to eventually reaching the market, developers must code using Java, and developers need to pay to become an android app developer due to native apps being platform specific. Juxtaposing the cons, Stark, Jepson & Macdonald (2012) reveal there are several pros to native apps which include: developers can use several features of the highly capable devices available nowadays, and, have customers ready to go on app stores.

 

The Pros and Cons:

Pros Cons
HTML o   Quick to develop for already existing content.

o   Durable, making it for all platforms.

o   Poor user experiences.

o   Lack of functionality

o   Performance inferior compared to native.

Hybrid o   Appealing to internal teams that have skills in web design-average skill required.

o   Gives developers a chance to ‘blend’ some of HTML5’s qualities into native qualities.

o   Low/no bandwidth, meaning slow data processing.

o   No distinctive mobile functions.

 

Native o   UI (User Interface) and UX (User Experience) are fluent and appealing.

o   Use all a devices capability.

o   High bandwidth.

o   Easier to brand.

o   Durable in offline and online.

o   Superior security to HTML5.

o   High in cost.

o   Require developments for each specific platform, I.E, IOS, Android, etc.

 

 

Apps and Businesses:

Businesses are striving to take advantage of apps use by millennials. The Oracle study cited during the lecture, reiterates the point of making apps useable, as 55% of the people surveyed revealed a poor app experience would deter them from giving a company business. HTML5 and Hybrid apps are disappointing companies by their lack of consumer response, whereas native apps, are proving effective in the marketing segment.

 

What type of apps are there?

Currently, there are about 20 app categories on the store. As mentioned in the lecture, “games” are by far the most popular category on the app store.

most_popular_Amazon_appstore_categories_6-e1456327880282.png
Enter a caption

Figure 2 Statista (2015) Percentage of Device Installs. Graphic. Retrieved from:

http://www.businessofapps.com/wp-content/uploads/2016/02/most_popular_Amazon_appstore_categories_6-e1456327880282.png

 

 

The above infographic indicates the high demand of games on the app store. The lecture cites the six main app categories to: Utilities, Entertainment, Games, News, Productivity and Social Networking. The purpose of an app, is to make peoples lives’ easier.

 

What do we need to know about app design?:

  1. Users expect UI controls: Use familiar features to appeal to user.
  2. Touch Input (Gestures): Keep in mind that apps use touch qualities, not a mouse input.
  3. High resolution is here to stay: Higher pixel count, making texts and images appear sharper.
  4. Time is short: Quick functionality- design the interface design for a swift experience. Basic structure is extremely effective.
  5. Real-estate is tiny: Buttons need to be at least the size of a fingertip. Avoid placing buttons near the edge of the screen.
  6. Context is everything: usage scenario is dictated by the context, include relevant information and features.
  7. Wireframes are essential: useful way of planning user experience.

 

Reference;

Stark, J., Jepson, B., & Macdonald, B. (2012). Building Android apps with HTML, CSS, and JavaScript (1st ed.). Beijing: O’Reilly.