Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


VisualForce UI/UX Patterns

No description

Jonathan Cohen

on 3 April 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of VisualForce UI/UX Patterns

VisualForce UI/UX Patterns
Considerations to updating UI
What about Salesforce UI/UX Options ?
Salesforce allow you to decide what level of UI/UX customizations
to incorporate almost without limits.

It go from
OOTB (Out of the box) Salesforce UI
to totally customizable
Off-platform app Salesforce APIs.
UI/UX on Salesforce are very flexible.
You can use and mix a lot of technologies to reach any expectations and improve user's feeling.

Salesforce UI/UX go from standard OOTB
to your own customized UI.

Each pattern gives some benefits and drawbacks that need to be evaluated.
UI / UX Definition
UI - User Interface
How users interact with a machine / application.
UI includes hardware and software components.
A good UI provides a "user-friendly" and intuitive experience.

UX - User Experience
User's feeling and emotions about using a product.
UX is the user’s perception of a system aspect such as
utility, ease of use and efficiency.

For example
: Think of a car
UI would be the components: Color, wheels, dashboard...
UX would be the sensation: Comfort, speed, feeling...
The keys we need to look out to decide how far into this spectrum we go.
Changes in the UI can upset some users.
As you know it with Facebook, GMail ... updates.

In addition, "training" is needed for the user to adapt with the new UI.

So why companies spend so much money in it ?
Because the risks associated with not updating outweigh those associated with updating.
As you see on the picture, the UI (design) begin with the simple page layout of Salesforce and can be totally customize using Visualforce, Apex, CSS, Javascript & it's libraries, Plugins, APIs ...
It will be a lot better in a custom UI.
Efficiency (speed):
It is possible to simplify the UI, so more it is more efficiency and faster on Custom UI.
For example:
1 click and 1 screen with Custom UI instead of 3 clicks and 3 screens in Salesforce OOTB.
Team Skillset:
It depends on the programmers skills with Java, C#.NET, CSS, Javascript & libraries, Visualforce ...
Application deployment time is much faster in OOTB.
OOTB works on PCs, Tablets and Mobile without changing any code.
Page Layout:
the standard page layout of Salesforce.
No code needed, (drag & drop), portable ...
But UI and customization are limited.

not much code,
create static better
looking customized
pages (HTML),
it has a UI interface.
See example.
VF + Apex + Standards tags:
Incorporate standard Salesforce CSS.
You get a standard Salesforce UX but more UI.
Standard tags automatically adapt to mobile devices.
Standard tags also provide error handling, re-render capabilities ...
No need to know Javascript.
VF (Visualforce) without Apex:
standard object controller.
Basic Salesforce UX but more UI control.
Allow custom look and feel.
Looks like what we learned in The Workbook.
See example.
VF + Custom CSS:
CSS allows to control UI design and meet exact specifications.
CSS can be stored externally (linked to your page) or included via
static resources of Salesforce.
CSS need to be developed and tested for all browsers and devices
(desktop, mobile, tablets...).
So it can be a large undertaking.
VF + Apex + AJAX:
It is the most common pattern.
Ajax and other Javascript libraries can be leverage (Jquery, DOJO...).
Be careful to avoid excessive library usage (performance).
By using these technologies you can deliver a fully branded UI.
Ajax provides partial page refreshes to create a dynamic user experience (UX).
You keep Salesforce infrastructure and platform features (security & portability).
Requires knowledge in VF, Javascript & libraries, and Apex.
Off-platform App + Salesforce API:
The custom app (web / mobile) will interface with Salesforce only
through API layer.
If pages are serve off-platform you need to consider infrastructure
(security, portability, cloud based).

It gives developer complete control of the UI elements.
Developers need to develop interface for all devices
(mobile, tablet, browsers...).
But you still get Salesforce benefit such as data storage, API access.. .

It is the most customize solution but it requires the most development effort.
Let's go over some UI possibilities.
Let's go over some UI possibilities continue.
Let's go over some UI possibilities continue.
Let's go over some UI possibilities continue.
Let's go over some UI possibilities continue.
Let's go over some UI possibilities Last.
UI customization with Salesforce
An example of a customize
App working with Salesforce API
The OOTB give you
build in Security and
limit the risk.
Full transcript