This is really frustrating when trying to target specific elements, nobody wants to write css with that!!
I find embedded form web parts to be the best way to include Infopath forms in Sharepoint and they allow some external manipulation – such as query string integration and filtering – and also enable easier styling on the rendered objects via a script editor webpart.
An interesting problem raised its head – making InfoPath forms ready for mobile & tablet and finger friendly – the multi choice selection boxes have very little in way of styling that you can access, just padding, font size, borders… The lines are too close together and the checkboxes are too small.
Sadly these boxes don’t have a nice targetable name, they are part of a fieldset in a stupidly named div, so we can’t easily specify what to manipulate and just chuck in some css. We also want to change all the checkboxes throughout the form not just one field.
We can however use attribute selectors in CSS = [attribute$=value]
Came across something I saved a while ago from a Quora response to the question…
What are the some of the most interesting UI elements of recent times?
The majority of these suggestions that I have included were provided by Stephen P Anderson
You can read the rest of the answers here, lots of them refer to styling and I wanted to focus on interactions mostly.
I didn’t compile this list, I have removed a few but I’ll try to state my view on how as as SharePoint dev they might be well utilised, especially given the freedom the app model affords us.
“Sticky” headers/sidebar content – critical elements stay fixed as you scroll down the page (the way the GMail header stays fixed as you scroll through an email, lots of “share” functionality on blogs/magazines stays with you as you scroll down the page). See also http://fab.com/inspiration/ main nav. The text formatting options in Quora and Basecamp Next stay with you as you write longer posts.
Responsive layouts. ‘Nuff said about this! (well device channels aren’t gonna cut it – stick RWD in your branding)
Direct manipulation of objects (vs toggling between CRUD states). See how minutes.io puts you directly into the meetings page.
Web fonts – especially more humanistic/geometric typefaces like Proxima Nova, Museo Sans, and (soon) Gotham. See http://www.fastcompany.com/
More “discoverable” controls (for better “cleaner interface” or worse “how do I do x…!?”); the Metro UI from Microsoft is able to produce cleaner screens because secondary elements are “hidden” in corners and edges (see:http://msdn.microsoft.com/en-us/… ) We’re all used to this in the ribbon so embrace this technique)
Drop down options loaded with information and even pictures (modern drop downs often aren’t based on an actual UI drop down controls). we’ve all come across mega dropdown menus for navigation but including controls or extra content in your app can mean a much better UX flow
Bigger type sizes, hit areas, buttons and white space – so that Web apps might also be touch friendly w/o a lot of refactoring – we all know this is going to be useful
Options that resemble “cards” (think Pinterest.com and all the clones) – I can see this being a great technique for showing search result content, much richer for certain uses than a standard results list. We are now seeing this for people search and it’s a welcome development.
A move away from noticable gradients and drop shadows (still used, just in a much subtler way)
“Fake” drop shadows or borders – the ultralight 5 pix shadow that doesn’t “fade” away (Google apps do this a lot).
“As you need it” functionality – instead of functionality being exposed by default, it’s presented in a series of sequenced moments (clicking on “add a comment” link or box turns into expanded box with more options, OR rating something exposes a comment field – contextual and reactive based upon a users actions
Direct manipulation of default data, vs wizards to set things up
Auto save functionality (vs big “Save” button)
More drawers and slideouts from the top, bottom and edges. Similar to mega drop down menus but some different directions!
Inline expanding areas for additional information/actions – the SP “grouped by” list views are a good example, gives the users a broader view and the option to expand to see detail.
Very, very subtle textures, to draw light contrast that guides the eye through a page. See http://subtlepatterns.com/ as a resource for these. See Pinterest, Basecamp Next, and Branch.com as examples of sites with this subtle background that draws your focus to the content (focus area)
Search boxes that “expand” (width) on click – great idea
“Kiosk style” buttons – rather than present 4 radio buttons options, sites opt for the more visual display of text in rounded corner boxes (which actually aids in spatial recall and creates a bigger hit target) – currently revamping an InfoPath form to reflect this,
Conversational UIs – rather than a form label and drop down, you see a phrase with the drop down options worked into that phrase. For an extreme example of this (and the “kiosk style” buttons mentioned above). The enterprise can be a dull place, perhaps conversations can change that.
More general patterns:
A move away from tabbed navigation (in Web apps). This follows the “focus on content, not chrome” argument put forth by folks like Luke Wroblewski. Not sure about this one – well designed tabs can be great for complex forms.
More white space, padding (for reasons of touch, see above)
Bauhaus, minimalist design – Google redesign, Microsoft, Amazon redesign (header area); this “minimal” styling uses grays or desaturated colors, so that when a bright color is used, it’s used to draw attention.
Single page apps – lots of different “states” on a single page no longer feels like moving through linked “pages”
Very open layouts – less boxes and more lines/spacing to visually group areas; boxes still used on core content, but not as much for chrome/layout
Single column layouts – less distracting and mobile ready
More friendly, conversational language around form elements
Content being given proper information design treatment (varying type sizes, caps, shading, etc. to aid in understanding.
When dealing with almost every user-centric project in SharePoint there is some consideration of UX and not just the technical challenges we face. The interactions we design have a great impact on a projects success, and in turn a users satisfaction, and we almost always need to consider how broad the user base is going to be.
This means that employing patterns that are established and proven to be successful must surely help. With that said I think the web community create good trends based upon success so new styles are always evolving and we can help ourselves within the SharePoint platform by being more like the innovators on the wider web.