Monday Sep 21, 2015

Licht Is Uit? eProseed Shines the Light on IoT and Design Patterns with TopCasuS

At the Oracle government and innovation event held in Rotterdam in the Netherlands, Oracle partner eProseed demoed a public sector solution that brought together the Internet of Things (IoT) and Activity Based Working (hat tip: Erik Veldhoen [@erikveldhoen]) to enhance business processes for customers: TopCasuS.  Oracle Applications User Experience design patterns and guidance helped eProseed to build a great solution in a productive and consistent way. eProseed NL managing partner, Lonneke Dikmans (@lonnekedikmans) explains more.

Overheid en Innovatie

Tijdens de Oracle Overheid en Innovatie beurs liet eProseed met hun oplossing voor gemeenten en centrale overheid zien hoe je met behulp van Internet of Things (IoT) bedrijfsprocessen kan optimaliseren en verbeteren. TopCasuS is gebaseerd op Gemma 2.0 principes en het concept ‘activity based working’. Dit betekent dat de gebruiker toegang heeft tot de juist informatie op het juiste moment.

TopCasuS UI using Oracle Alta UI

TopCasuS gebruikt Oracle Alta UI 

Op dit moment zijn de volgende modules beschikbaar:

  • Sociaal domein. Enterprise-grade oplossing voor gemeenten die hen ondersteunt bij het uitvoeren van de drie decentralisaties;
  • Openbare ruimte. Module die gemeenten helpt de openbare gemeente schoon, heel en veilig te houden;
  • Shared services. Module voor gemeenten die fuseren of een shared service aan het inrichten zijn.

Licht Is Uit

De openbare ruimte wordt niet alleen schoon, heel en veilig gehouden met behulp van regulier onderhoud, maar ook door te reageren op meldingen. De meldingen kunnen worden gedaan door burgers via een app of the gemeentelijke website, door ambtenaren en ketenpartners en door gebruik te maken van IoT technieken.

Luc and Lonneke demo at the event

Lonneke en Luc op het evenement met Licht Is Uit

Tijdens het evenement demonstreerden ze het volgende scenario:

  1. Een lichtsensor in een fietstunnel meet de hoeveelheid licht in de tunnel. Mensen voelen zich veilig in een verlichte tunnel. 
  2. Als de tunnel donker is, bijvoorbeeld omdat het licht stuk is, wordt een notificatie verzonden naar het meldingen buitenruimte proces. 
  3. De ambtenaar die verantwoordelijk is voor het gebied van de fietstunnel ontvangt een notificatie dat er een nieuwe zaak is gestart en hij pakt deze op, op dezelfde manier als wanneer een burger of college de melding gedaan zou hebben.

English Language Version

The eProseed TopCasuS solution is based on Gemma 2.0 principles and Erik Veldhoen's (@erikveldhoen) concept of Activity Based Working. This means that the user has access to the right information at the right time. Right now, the following modules are available:

  • Social services. Enterprise grade solution for municipalities (Dutch local government) to support the implementation of new laws about youth care, work, and decentralized social support.
  • Public domain. Module to help municipalities to keep public services and the environment safe, clean, and working properly.
  • Shared services. Module to support municipalities when merging and when they need to implement shared services.

Licht Is Uit (Light Is Out) Demo

Keeping public areas safe, clean, and working properly is carried out by regular servicing, but also by the local authority's reaction to the prompt notifications of issues with their services. These notifications can be triggered by a citizen reporting an issue using a mobile app or a website or by a local authority employee or contractor noticing an issue. But now it can also be reported automatically using the IoT. At the Rotterdam event, eProseed NL CTO and managing partner Luc Bors (@lucb_) demoed with Lonneke how sensors detect an issue and let the local authority know about a problem:

  1. A sensor in a bike tunnel measures the amount of light in the tunnel. Pedestrians and cyclists can go safely through the tunnel.
  2. If a light bulb in the tunnel fails, or something else causes the tunnel to become dark, the sensor detects the change in lighting conditions and a notification is automatically sent to the local authority, creating a new case in their service system.
  3. The local authority employee responsible for the tunnel maintenance receives a notification that a new case has been started, can then assess the situation and process it, just as if a citizen had filed the issue. 

Watch out for more solutions that partners can build productively with reusable UX design patterns and Oracle technology and for demos of the solutions at an event near you soon.

Read more about our eProseed UX enablement event in Utrecht, too.  

Friday May 29, 2015

Oracle Usable Apps @ Smashing Conference Los Angeles: Performance Time!

Sarahi Mireles (@sarahimireles), User Experience Developer on the Oracle Applications User Experience Communications and Outreach team, shares her exciting experience and thoughts about SmashingConf in Los Angeles.

In April I attended SmashingConf (@smashingconf) LA organized by Smashing Magazine. The venue was the great Hotel Casa del Mar, located right on the beach by the Santa Monica pier.

The views were amazing, the people were fun, and the conference was even more exciting than I expected.

Santa Monica: beach scene.

More than 300 people, including front-end developers, designers, and user experience (UX) experts attended, all eager to hear what 15 different speakers had to say about user experience, design tactics, performance optimization, responsive design, the future of the web, and other interesting topics.

Pictures of the conference setting

The conference started with a really cool opening in 3D (glasses included) and a talk from Steve Souders (@souders) about design and performance and what happens when designers and developers don't work together. It might look a little like the image below:

Pillow fight scene illustrating what happens when developers and designers don't work together

User experience is not only about design; it is also about performance. And actually, speed is the key reason why most people decide to either keep looking at a website or to close their browser window. As Patty Toland (@pattytoland) said in her talk, “How we define and deliver: responsive design": "Your analytics won't tell you who left your site before it showed up. If you have never considered performance before, it may be a good time to start thinking of it.”

If you don't have performance you don't have anything. Start telling your customers that story

One of my biggest takeaways from the conference is that user experience has everything to do about the guy sitting in the chair designing the experience. Samantha Warren (@samanthatoy) sums up my thoughts nicely: “As UX designers, or UX developers we have to think like a guerrilla: flexible, fast and persistent. Do the work you love with the tools you know. There's not an absolute way or tool to get something done.”

There is nothing more dangerous than an absolute in a tactic or tool

Those are just a few of the things that I loved the most from the amazing web wisdom in the room.

You’ll see how some of the things I learned at SmashingConf will help make your experience using the Oracle Usable Apps website even faster and more responsive in the future. And, if you’re a developer, stay tuned to hear about how we integrate better performance, responsive design, and UX across our online presence.

Sunday Apr 26, 2015

Book Review with a Real-World Application from a Master | Keeping It Simple, SaaSy

By Floyd Teter, Director, Strategy Group, Oracle Higher Education Practice at Sierra-Cedar, Inc., and guest contributor

Floyd Teter (@fteter), Oracle ACE Director, Oracle Applications User Experience Speaker, ORCLville blogger, and main man behind ”simple is the new cool” shares his thoughts on a book about Lean UX.

A few months back, I received an interesting request from my Oracle Applications User Experience sensei, Ultan O’Broin (Mr. @usableapps). Ultan asked me to read and share opinions on the book Lean UX: Applying Lean Principles to Improve User Experience (Jeff Gothelf with Josh Seiden). I read a few reviews myself and got excited about what Gothelf was trying to do: build a framework for applying Lean principles to user experience (UX) design. I agreed to give it a go.

Lean UX: Applying Lean Principle to Improve User Experience on Amazon

Lean UX: Applying Lean Principles to Improve User Experience by Jeff Gothelf with Josh Seiden

First, let’s be a bit more specific about the book. The intent is not just to apply broad Lean or Agile principles (Gothelf references both, sometimes interchangeably); the real intent is to apply the Scrum methodology to UX. It’s no secret that I’m a bit of a fan and heavily engaged with both Scrum and UX, so I was excited to dive in.

The meat of the book is divided into three sections: Introduction and Principles, Process, and Making It Work. Each section contains multiple chapters.

In the first section, Gothelf lays out the argument for Lean UX: internet-based software distribution, lower barriers to market entry, continuous integration, agile software development, continuous deployment—all activities that put pressure on teams to shorten cycles to release product early and often, critical to meeting the faster innovation cycles in the SaaS and PaaS world.

Gothelf proposes Lean UX as a deeply collaborative and cross-functional method that enables teams to build a shared understanding about UX design by focusing on objective goals rather than being distracted by deliverables and documents. Having presented this argument, Gothelf then discusses the three foundations of Lean UX: design thinking, agile software development, and the Lean Startup method of build-measure-learn feedback loops, originally founded by Eric Ries.

Design thinking, as defined by design firm IDEO CEO and president Tim Brown, is “innovation powered by . . . direct observation of what people want and need in their lives and what they like or dislike about the way particular products are made, packaged, marketed, sold and supported . . . a discipline that uses the designer’s sensibility and methods to match people’s needs with what is technologically feasible and what a viable business strategy can convert into customer value and market opportunity.” That’s a real mouthful, but it comes down to designing elegant and simple solutions that people will want to use.

Gothelf defines Agile methods by reviewing the Agile core values and utilizing Scrum to apply these core values. This is not new, but it was good to see Gothelf sign up for using Scrum in UX design. Makes sense.

Finally, Gothelf promotes build-measure-feedback loops. I’m still mostly onboard here, although my preferred viewpoint is a build-observe-learn approach (with observe being mostly watching and listening).

Throughout Part I, which is really a discussion of principles and theory, I’m thinking Gothelf could be my twin brother from a different mother. We’re both singing off the same sheet of music. Part II does seem to be more of a “difficult second album” though.

In Part II, Gothelf applies the principles discussed in Part I, a journey where the metaphorical wheels begin to come off the tour bus. Lean UX relies heavily on written deliverables and formal structure for starting up a UX design effort:

  • A hypothesis statement, with assumptions, hypotheses, outcomes, personas, and features 
  • A problem statement, with product and/or system goals, problem description, and a description of an explicit request for improvement that doesn’t dictate a specific solution 
  • A business assumptions worksheet, including prioritized assumptions 
  • A recommendation for written subhypotheses 
  • A written declaration of metrics to be used along with current state of each metric 
  • A written list of features matched to groups of user personas 

After we’re done with writing (he comments “finally!”), Gothelf proceeds to lay out some pretty formal structure for design studio sessions, including time-boxing presentation and critique, iteration and refinement, and team idea generation. Gothelf also argues for creating a style guide prior to design (as opposed to building concurrently as you progress and learn).

This is the point where Lean UX stopped making complete sense in my world. Agile and Scrum make a point of minimizing written deliverables, especially anything that might be a barrier to getting started with the actual design and build work; the idea being the sooner you get into feedback loops, the quicker you’ll deliver a product of outstanding quality. Gothelf acknowledges this in Part I, yet his recommended process is based on the opposite. Gothelf continues with the formality and structure throughout Parts II and III.

I’m now hard-wired against formality in development; software development cycles in the cloud almost demand that. Partners and developers need to create real solutions fast—formality presents the risk of getting wrapped up in management processes that distract from the essential tasks required to design, innovate and build rapidly.

A final point of contention for me comes with how feedback loops are addressed. These loops are mentioned a founding principle of Lean UX in Part I, yet there is almost no discussion of how to leverage their value (by observing and learning). How do you elicit feedback? How is feedback filtered for relevance and priority? What techniques are used to assure the user that he/she was heard . . . which, in turn, elicits even more feedback. Discussion? Tips? Techniques? Zip. Zero. Bupkis. Notta. Nothing.

My own applied techniques? I suggest following the discover-design-deploy approach on the Oracle UX Direct website.

Discover-Design-Deploy from Oracle UX Direct

Discover-design-deploy approach from UX Direct

Begin by recording the required features on Scrum story cards, cutting to the essence of what’s important from your discovery stage. I’d then follow the Scrum process for estimating and prioritizing features prior to starting the first design sprint. Now, I’ve tried lots of virtual Scrum boards for geographically-dispersed project teams to keep track of everything, but Trello remains a favorite. Sprint productivity can be further accelerated by use of UX design patterns and guidelines so that developers can focus in on technical areas.


Trello virtual Scrum board

In summary: The book presents great conceptual ideas, but the approach and implementation didn’t rock my world of delivering on enterprise applications UX today. It left me hoping for more.

My point of view would be to stay away from structural overheads and formality, and stay truer to Agile concepts. I’d recommend a mix tape The Elements of Scrum (Chris Sims and Hillary Louise Johnson) and the simple discover-design, and deploy approach to UX on the Usable Apps website.

Splash BI Reports mobile app

Splash BI reports app built using Agile

You’ll quickly build simple, elegant solutions.

Read more Floyd Teter insights on ORCLVille.

Friday Feb 20, 2015

Oracle Design Jam takes a look at the Future of Information

By Sarahi Mireles and Kathy Miedema, Oracle Applications User Experience Communications and Outreach

From Kathy...

In keeping with a new emphasis and investment from Oracle on exploring emerging technology for ways to encourage the evolution of the Oracle user experience, the UX Innovation Events (@InnovateOracle) team held a design jam for Oracle employees in early February.

Since embracing their charter in Fall 2014, the team -- a branch of the Oracle Applications User Experience (UX) team -- has organized and held a rapid succession of design jams. The design jam focused on the future of information design.

Verbal Karate Chop: The Team. (L-R) Tony Orciuoli, Sarahi Mireles, Sasha Boyko, Rob Hernandez (Kathy Miedema not pictured)

Verbal Karate Chop, the team: (L-R) Tony Orciuoli, Sarahi Mireles, Sasha Boyko, Rob Hernandez, and Kathy Miedema (not pictured) 

It’s worth pointing out how exciting it is to be part of an organization that encourages a free flow of thinking and creativity by supporting events like these. Our team met a few times before the event to kick-start our brainstorming, and then took off an entire day to participate in this event.

We were well-supported during the event too – we had room to collaborate, materials to help us develop ideas, mentors to help guide us, food to keep us fueled.

Our team, Verbal Karate Chop, designed a product that builds on the technology behind Oracle Voice, pulling in information around a particular keyword or phrase to create meetings, help prepare for meetings, and even start a meeting hands-free if you happen to be driving in your car, for example.

Sarahi can better describe what it’s like to participate as a developer and build an idea like this on a tight deadline. Before turning it over to her, I’m happy to announce that our idea won both the People’s Choice award and the Best Use of Audio/Video award. This was my first time participating in such an event – what a thrill it was!

Innovate and diversify. Getting the message out: Kathy Miedema and Sarahi Mireles

Innovate and diversify. Getting the message out: Kathy Miedema and Sarahi Mireles

... and from Sarahi

As a developer, I find it really fun going to a design jam. The best part after the brain-storming is starting to build your prototype. This can be something really simple or something quite complex, and that actually depends on the time you have and how fast are you able to play with whatever tool you are using.

Time was actually the key factor for this design jam. Having only a couple of hours to build your entire idea is what really makes your adrenaline surge.

We started putting together all our ideas, and then we began to draw the general design of the whole idea (I’m glad we had two designers on our team!), and after that, we built it.

From a non-designer point of view, I have to say that we designed some cool UIs after a couple of hours of pushing our brains to the maximum. And it was awesome to build out those ideas.

If you have the opportunity to join a design jam, do it! It’s also the best way to learn from other developers and non-developers, and to explore all kinds of crazy ideas for innovation in the enterprise.

Verbal Karate Chop. The User Experience: People’s Choice and the Best Use of Audio/Video awards

Verbal Karate Chop, the user experience: People’s Choice and Best Use of Audio/Video awards

Explore more 

Find out more about this Oracle Applications User Experience design jam and about other events on the UX Innovation Events blog, and follow event happenings on Twitter.

The overall results of the design jam are here.

To discover more about the emerging technology and trends that drive the Oracle Applications User Experience strategy, get the free eBook from Vice President, Jeremy Ashley (@jrwashley). 

Thursday Nov 20, 2014

Concept to Code: Shaping and Shipping Innovative User Experience Solutions for the Enterprise

It was an exciting event here at Oracle Headquarters as our User Experience AppsLab (@theappslab) Director Jake Kuramoto (@jkuramot) recently hosted an internal design jam called Shape and ShipIt. Fifteen top-notch members of the newly expanded team got together for two days with a packed schedule to research and innovate cutting-edge enterprise solutions, write use cases, create wireframes, and build and code solutions. They didn’t let us down.

The goal: Collaborate and rapidly design practical, contextual, mobile Oracle Applications Cloud solutions that address real-world user needs and deliver enterprise solutions that are streamlined, natural, and intuitive user experiences.

The result: Success! Four new stellar user experience solutions were delivered to take forward to product development teams working on future Oracle Application Cloud simplified user interface releases.

Design jam event banner

Design jam event banner

While I cannot share the concepts or solutions with you as they are under strict lock and key, I can share our markers of the event’s success with you.

The event was split into two days:

  • Day 1: A “shape” day during which participants received invaluable guidance from Bill Kraus on the role of context and user experience, then researched and shaped their ideas through use cases and wireframes.
  • Day 2: A “ship” day during which participants coded, reviewed, tested, and presented their solutions to a panel of judges that included Jeremy Ashley (@jrwashley), Vice President of the Oracle Applications User Experience team.

It was a packed two days full of ideas, teamwork, and impressive presentations.

Photo: Participants Anthony Lai, Bill Kraus, and Luis Galeana [photo: Sandra Lee]

Participants Anthony Lai, Bill Kraus, and Luis Galeana [photo: Sandra Lee (@SandraLee0415)]

The participants formed four small teams that comprised managers, architects, researchers, developers, and interaction designers whose specific perspectives proved to be invaluable to the tasks at hand. Their blend of complementary skills enabled the much needed collaboration and innovation.

Photo: Diversity drives more innovation at Oracle. Participants Mark Vilrokx, Osvaldo Villagrana, Raymond Xie Julia Blyumen, and Joyce Ohgi hard at work. [photo: Karen Scipi]

Diversity drives more innovation at Oracle. Participants Mark Vilrokx, Osvaldo Villagrana, Raymond Xie Julia Blyumen, and Joyce Ohgi hard at work. [photo: Karen Scipi (@KarenScipi)]

Although participants were charged with a short timeframe for such an assignment, they were quick to adapt and refine their concepts and produce solutions that could be delivered and presented in two days. Individual team agility was imperative for designing and delivering solutions within a two-day timeframe.

Participants were encouraged to brainstorm and design in ways that suited them. Whether it was sitting at tables with crayons, paper, notebooks and laptops, or hosting walking meetings outside, the participants were able to discuss concepts and ideate in their own, flexible ways.

Photo: Brainstorming with notebooks and pens: Cindy Fong and Tony Orciuoli [photo: Sandra Lee]

Brainstorming with notebooks and pens: Cindy Fong and Tony Orciuoli [photo: Sandra Lee]

Photo: Brainstorming with laptops: Noel Portugal and Ben Bendig [photo: Karen Scipi]

Brainstorming with laptops: Noel Portugal and Ben Bendig 
[photo: Karen Scipi]

As with all of our simplified user interface design efforts, participants kept a “context produces magic” perspective front and center throughout their activities. In the end, team results yielded responsive, streamlined, context-driven user experience solutions that were simple yet powerful.

Healthy “brain food” and activity breaks were encouraged, and both kept participants engaged and focused on the important tasks at hand. Salads, veggies, dips, pastas, wraps, and sometimes a chocolate chip cookie (for the much needed sugar high) were on the menu. The activity break of choice was an occasional competitive game of table tennis at the Oracle Fitness Center, just a stone’s throw from the event location. The balance of think-mode and break-mode worked out just right for participants.

Photo: Healthful sustenance: Lunch salads [photo: Karen Scipi]

Healthful sustenance: Lunch salads [photo: Karen Scipi]

Our biggest marker of success, though, was how wrong we were. Yes. Wrong. While we expected one team’s enterprise solution to clearly stand out from among all of the others, we were pleasantly surprised as all four were equally impressive, viable, and well-received by the design jam judges. Four submissions, four winners. Nice job!

Photo: Participants (standing) Cindy Fong, Sarahi Mireles, and Tony Orciuoli present their enterprise solution to the panel of judges (seated): Jake Kuramoto, Jatin Thaker, Tim Dubois, Jeremy Ashley, and Bill Kraus [photo: Karen Scipi]

Participants (standing) Cindy Fong, Sarahi Mireles, and Tony Orciuoli present their enterprise solution to the panel of judges (seated): Jake Kuramoto, Jatin Thaker, Tim Dubois, Jeremy Ashley, and Bill Kraus [photo: Karen Scipi]

Stay tuned to the Usable Apps Blog to learn more about such events and what happens to the innovative user experiences that emerge!

Saturday May 31, 2014

General Availability: Simplified User Experience Design Patterns eBook

Karen Scipi (@karenscipi) writes:

The Oracle Applications User Experience team is delighted to announce that our Simplified User Experience Design Patterns for the Oracle Applications Cloud Service eBook is available for free.

Working with publishers McGraw-Hill, we're making our eBook available in EPUB, MOBI, and PDF versions.

Simplified UI eBook

The Simplified User Experience Design Patterns for the Oracle Applications Cloud Service eBook

The eBook illustrates the same user experience (UX) design patterns and page types and components guidelines that Oracle uses to build simplified user interfaces (UIs) for the Oracle Sales Cloud and Oracle Human Capital Management (HCM) Cloud.

Click to register and download your free copy of the eBook

UX design patterns and guidelines offer big wins for applications builders because they're proven and reusable solutions applied using Oracle technology. Our eBook enables developers to build a compelling user experience consistently, boosting developer productivity, and shortening the overall time to put a modern user experience into the hands of users.

Developers use the eBook to build their own SUIs
Developers use the eBook to build their own simplified UIs with Oracle Application Developer Framework (ADF) and Oracle JDeveloper

Oracle partners, customers and the Oracle ADF community can now share in the Oracle Applications User Experience science and design expertise behind those awesome simplified UIs in the Oracle Applications Cloud, and begin to build their own great simplified UIs too!

Wednesday Jan 08, 2014

Designing the Language Experience of the User Interface

When you think about any user interface (UI) guideline and you hear “language of the user,” what do you think?

  • I should be able to understand the words I see on the UI.
  • The words I see on the UI should be meaningful to the work that I do.
  • The words I see on the UI should be translatable and localizable.

The usability of business applications has evolved, and business applications have become more consumer-focused. The average user’s understanding of business applications has evolved as well. Technology and know-how now allow us to build contextual user experiences into applications and to design language experiences for the UI—with style, tone, terms, words, and phrases—that resonate with real users and their real, every day work experiences in the real world, across the globe.

For example, on the Oracle Human Capital Management Cloud My Details page, notice how the sections are organized, how they use real-world terms in headings and field labels, and how they use real content, such as personal and biographical details instead of placeholder text, which cannot be evaluated for its meaning or translation or localization needs.

Oracle Human Capital Management Cloud My Details page

Choosing which terms, words, and phrases to include on the UI is as important as choosing the right terms to use in code. In code and on the UI, the terms and words should be accurate in context and enable the successful completion of a task in context, whether the context is the processing of an event in the code or the user adding information to a contact record on a form in the UI.

37signals book, Getting Real, dedicates a short essay, Copywriting is Interface Design, to the importance of copywriting in UI design and how important every single word choice on is for the UI.

There are also numerous resources that support that choosing terms, words, and phrases for the UI that accurately represent real-world concepts in their source language often enables the translation and localization experiences. For examples, see Ultan Ó Broin’s Blogos entry Working Out Context in the Enterprise: Localize That! and Verónica González de la Rosa and Antoine Lefeuvre’s slideshare ‘Translation is UX’ Manifesto.

So how do we design a rich, context-aware UI language experience for today’s user?

  • We use accurate terms to represent concepts that are well-established in the real world by real users. These are the terms that users use frequently, terms such as team or shopping cart.
  • We use terms consistently to represent the same concepts across applications. We wouldn’t use location in one place and party site in another to represent the same concept, or save and submit to represent the same concept.
  • When we need to use these terms in context of phrases on the UI, we do so with a style and tone that resonates with users and yet is still translatable and localizable. This means that we don’t introduce nonsensical words or instant messaging-speak. We offer phrasing that is simple and clear: Add a new customer record.
  • We stop surfacing the language of the application on the UI, for example, code-specific terms. When we use a term like worker in the code as an abstraction or a superclass to represent the concept that a person can assume the role of “employee” or “contractor” in the system, this use makes sense in context of where and how it is used in code. When we surface the term worker on the UI to represent either or both roles, we introduce a context-independent use of this concept and one that when tested, we learn is not necessarily translatable or localizable in such a context.

Jakob Nielsen in his 1995 article 10 Usability Heuristics for User Interface Design identified a need for this practice of using language choices that resonate with real users: “The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”

A simplified UI is simple to build, simple to extend, and simple to use. Use and context awareness require us to build applications that focus equally on code, visual design, and language (UI) design. Every page that we surface to the user should make sense to the user in context of his work and the real world. The practice of designing the language that is used on the UI offers us an extraordinary opportunity to evolve how we communicate with users to enable their work everywhere.

Saturday Nov 16, 2013

Building Mobile Apps with Oracle UX and ADF Mobile Made Easy: Design Wiki Available

The Oracle Application Development Framework (ADF) Mobile and Oracle Applications User Experience (UX) teams have published a wiki for builders of mobile apps for tablets and smartphones using enterprise methodology. Bookmark the wiki now!

The wiki provides Oracle developers, customers and partners with a mobile toolkit  enabling the building of great mobile apps for today's workers who demand modern, consumer-like UX while being productive in completing tasks. Check out the information on the Oracle ADF Mobile components and their usage, and how the UX design patterns dovetail with the technology to provide reusable, easily applied solutions for developers. The design guidance now includes content and gestures, and the integration of device features such as voice and camera capabilities. 

ADF Mobile Design enables code once solutions for platforms and devices

Oracle ADF Mobile enables productive building through code-once solutions for platforms and devices.

There is some great task flow explanations too. Using a sample sales app, the wiki shows how tasks and device features are best designed to reflect the requirements for both tablet and smart phone users.

Watch out for more developer productivity resources and outreach coming from the Oracle Applications User Experience,  Oracle ADF, and Oracle PartnerNetwork teams. And, if you're in a position to share the results of these shared Oracle ADF and UX resources by telling us about your built mobile apps and use cases, reach out using the comments or through the customer participation channels on the Usable Apps website and let us know.

We'll share the UX goodness and you can share your greatness!

Wednesday Jul 24, 2013

Resources for Building Oracle ADF Applications

Interested in building a compelling, consistent, and flexible user experience with a user interface to support simple, intuitive interactions but not sure where to start? 

This entry lists the best resources to use to get started building great applications using the Oracle Applications Development Framework (ADF) technology. However, if you’re already an ADF developer, you can fast-track your learning curve by checking out our top 10 reads: Top 10 Things to Read If You’re a Fusion Applications Developer.

List of Oracle Fusion Applications resources

List of Oracle Fusion Applications resources 

The following table highlights the four key resources that we use when building ADF components and pages for Oracle Fusion Applications and offers examples for when to apply the information in each of these resources.

I’m building an ADF table, and I need to . . . Resource Use when . . .
Identify components and guidelines that I will need Oracle ADF Component Specifications You want to see examples and demonstrations of components, validators, converters, and miscellaneous tags, along with a property editor to see how attribute values affect a component.
Determine information design and  elements Oracle ADF Rich Client User Interface Guidelines

Your focus is data visualization, rich web user experience, visual development.

For example, if you were building a table, you would find guidelines for table design and table elements. Specific design and element guidelines include:

  • Layout
  • Row banding
  • Column formatting
  • Row height
  • Vertical and horizontal scrolling
  • Read-only or editable data

Add specific core and task-dependent features and interactions Oracle Fusion Applications Usage Guidelines

You’re looking for Oracle Fusion Applications-specific features and interactions that enable a cohesive user experience through the consistent placement and behavior of user interface elements.

Examples include:

  • Common and special icon types
  • Tasks pane
  • UI Shell

Apply  common and proven design and interaction patterns that align with industry best practices Oracle Fusion Applications Design Patterns  You want to apply common design patterns. Design patterns comprise common page designs that are built to accommodate common requirements that have been identified by the industry as best practices and have been proven by real users in our usability labs. Generally, our design patterns are delivered through JDeveloper as composite components, or they offer instructions on how to use ADF components.

Interested in learning more? 


Wednesday Jul 17, 2013

Wireframing | Blueprinting Usable Applications Concepts

By Karen Scipi and Ultan O’Broin, Oracle Applications User Experience

How do users' stories inspire user experience innovation and end up as well-loved, simple productivity features in your favorite mobile or desktop application? The process starts simply . . . with a drawing or sketch.

Building an application that is modern and compelling means framing the task scenario for the worker in context of the application features and then communicating the agreed result. Using a low-fidelity drawing to wireframe the proposed solution is a productive and efficient way explore, validate, and garner agreement on a design before it moves on to the prototyping stage of the build process.

Practice for building an Oracle applications user experience

Wireframing is integral to the user experience process of building great Oracle applications

Wireframing as part of the user experience process

A wireframe represents a story of how applications pages are used by real workers to do real work. Wireframing is a low-fidelity drawing on paper or electronic format that starts to close the gap between the intent of the concept and the action of the worker, which eventually comes to life as an application living in the cloud or in your computer room.

Wireframe example of a trouble ticket in CRM

Wireframe of a trouble ticket in CRM that shows how design patterns and guidelines are applied to  build consistency and productivity into a flow (click for full version in PDF)

Wireframing offers big wins for applications builders. We’ve learned that wireframing shortens the innovation cycle, exposes problems early, increases productivity of application builders, and eliminates costly surprises late in the build cycle. Customers and partners have learned this, too, when designing and tailoring applications. We use wireframes to apply usability heuristics, and we apply our user experience design patterns to the wireframe before a single line of code is written. Using wireframes, we can iterate quickly and evaluate alternatives in a cost- and time-efficient way. Partners and customers have learned this, too, and more, when designing and tailoring applications.

Which best practices do we apply when wireframing? 

Wireframing practices vary. We follow a few best practices consistently, including: 
  • Focus on the intent of a wireframe. 
Understand the difference between a wireframe, prototype, and testable application code. Garner buy-in from the right stakeholders, not just end users, but also other interested parties, such as other workers or developers or support people, managers, and decision-makers so that you can void the "but all I wanted was" syndrome after the development is complete. And do remember this is a process. Some things cannot be wireframed
  • Manage your wireframing practice. 
Plan and control wireframing by assigning an owner, applying file naming and priority conventions, managing version control, adding arrows and annotations, and so on. 

Think about this: The great sketching master Leonardo da Vinci organized his sketches in a codex or library—principles that are well founded to this day.
  • Use suitable tools. 
Paper and pencil can be used as basic wireframing tools, but they are not scalable and persistent. Software tools, such as Balsamiq Mockups (widely used in Oracle), Microsoft Visio (a favorite of Oracle Fusion Applications internally, also used by the Oracle Application Development Framework team), Microsoft PowerPoint, and mobile options, for smart phones or tablets are better alternatives for building enterprise applications. Considerations for wireframing tools that we've found most useful include ease of use, speed of iteration, portability, ease of collaboration, cost of the software, and ability to avoid lock-in between partners.
  • Establish a few process best practices. 
Wireframing is about iterating until agreement is reached. Provide alternative drawings for evaluation by stakeholders. Create widgets, templates, and stencils for wireframing in your tool of choice and then reuse them. Matching wireframe flows to the reusable solutions provided by user experience design patterns also cuts design and development time and improves developer productivity.
  • Learn from others. 
Stay tuned to Misha Vaughn's Voice of User Experience (VoX) blog and your customer and partner channels so that you can learn about workshops that focus on building great-looking usable applications, A Day in the Life of UX wireframing activities, and other upcoming outreach opportunities that explore wireframing as part of the overall user experience process.

Interested in learning more? 


Wednesday Jul 10, 2013

Visual Design for Any Enterprise User Interface (Art School in a Box)

By Karen Scipi and Katy Massucco, Oracle Applications User Experience

"What color is Facebook?" Without thinking, you know it's blue. This isn’t by accident. So, what is the science behind visual design in enterprise user interfaces? 

Visual design is an essential part of the user experience. A well-designed user interface starts to become invisible to the user. It's naturally pleasing, and it doesn't create tension or roadblocks. It starts to feel like a comfortable shirt; you don't notice it. A poorly designed user interface feels like an ill-fitting shirt with a scratchy tag on the neck; you're going to notice it, and it's going to annoy you.

We've all seen visual designs that have made us cringe. And we've all seen visual designs that have made us feel good. Have you ever thought about what the differences are between these types of experiences, or why one resonates with you more than the other?

Any number of key elements affect visual design and users' responses to the design. We offer one that we consider key to users wanting to use an application or website that goes beyond usability and appeals to their emotional side: branding. Of course, you should also consider other aspects when designing a user interface for an enterprise application. All of these elements add up to helping "delight and excite" users, which results in productivity—for them and their businesses. 

Why branding? Because branding is the "hook." A well-considered brand gets noticed, so does consistency across a user interface. Branding is more than a logo. Branding represents the overall "personality" or impression of the design, and it is supported by these next few key design elements.


Color impacts the brain. A user draws conclusions from the ways that color is applied.  Color can work to your advantage if you understand how color works and is perceived by users. However, applying colors that violate this understanding can work to your disadvantage. For example, a color may have different meanings in different parts of the world. A good practice for controlling colors is applying a product coding strategy.

Examples of color usages

Examples of color usages


Contrast is the difference between two adjacent colors. In our user interface designs, we consider these points:
  • Good contrast is central to the legibility of text. 
  • The highest contrast is black text on a white background, such as those used in books, newspapers, and dense online text.
  • Poor contrast can cause eye strain for users, even for those users with good vision.
  • Poor contrast can render a page illegible, especially for users with compromised vision.
  • Accessibility standards require a minimum level of contrast.

Examples of text on color contrasts

Examples of text on color contrasts


Layout focuses on how components and content are arranged on a page. A layout should optimize the natural way that content is read and scanned by a user. A page layout should consider and complement the reading order of a language (left-to-right or right-to-left). The content should be grouped and arranged logically and should establish relationships among objects that appear on that page.

Eye tracking enables user experience designers to determine where users' visual attention is focused. The data that we collect from our eye-tracking usability studies helps inform layout and other design aspects that we've proven might better accommodate users' natural reading tendencies.  

You might wonder why even small changes in layout and where you position components and content on a page are important. Changes can be interpreted as swimming upstream: you are fighting the natural order of things when you don't conform to established and proven practices, such as reading order. Even tiny spurts of lost user productivity can turn into death-by-a-thousand-cuts for an enterprise, as proven by Oracle Applications User Experience and industry science

Examples of left-to-right and right-to-left language reading order

Examples of left-to-right and right-to-left language reading order


Spacing, such as white space and padding, is a powerful design element. When used deliberately, blank areas on a page can be used to break up the density of content on the page and to give the eye a place to rest or focus.

Examples that show how padding creates resting places for the eyes

Examples that show how padding creates resting places for the eyes


Font choice reflects the personality of the site, for example, the brand. Conservative fonts, such as sans serif ones, are generally more easily read. Eclectic fonts, such as serif fonts or script, offer a trendier impression.

Font color and text styles also enhance (or not) the readability of the text, so they should be used deliberately. Consider that:
  • A color change within a block of text draws the eye to it and makes the user think that the text is different in some way, for example, a link, which is set in a different color from the text that surrounds it.
  • Bold text draws the eye to it and should be used to emphasize a word or a block of text. 
  • Italic text can be difficult to read online. It becomes either blurry or jagged, depending on the quality of the font and users' screens.

Examples of sans serif and serif fonts

Examples of sans serif and serif fonts


Icons are small images that powerfully impact comprehension. The eye is drawn immediately to an icon on a page rather than to a text button that contains the same information. When used, icons should differ enough in shape and color so that the user can identify the differences by simply scanning the page. 

The frequency of use should consider that the average user can process and understand a limited number of icons, their meanings, and their relationships among other icons—for example, status icons—at any one time. Our research yields that the average user can hold five icons in their thoughts at any one time. When the number of icons increases above five, our research yields that users' comprehension becomes compromised because there are simply too many meanings and relationships to consider and understand. 

Icons draw the eye to them, so they should be used judiciously. Too many icons on a page can add a lot of visual noise. When overused, users' eyes will bounce around the page from icon to icon. 


As we've moved into a more device-agnostic era, we've had to think about how to build enterprise applications for use across different devices. To control the overall visual design across devices and to ensure consistency and promote reuse across pages, we've centralized our style classes in a cascading style sheet (CSS). We also:
  • Use fallback fonts to control the appearance of the user interface if the device uses different system fonts. 
  • Test our CSS in different browsers and on different operating systems.
  • Avoid relying on images to colorize elements or add curves or gradients because they require manual image editing to revise.

The visual design aspect of any enterprise application can be quite complex. While we didn't cover every aspect of visual design in this blog entry, we hope you walk away with an understanding of what we consider the key element of visual design to be as well as its supporting visual elements for our enterprise applications. 

Interested in learning more? 



Welcome to the Usable Apps in the Cloud blog.

Learn more about us at
Usable Apps


« October 2015