If a question seeking product recommendations is not deemed 'right', please feel free to lock/delete this post. I will seek other avenues.
The presentation layer of enterprise applications has hardly ever been my focus area. However now, I am required to look for a development platform that allows quick and easy development of dashboards with widgets. Where, development is no more than drag-drop and few clickys here and there. This is because the audience is more of business oriented folks than development staff.
After much browsing around, I think, I have short-listed the requirements of a development platform suitable for us.
Custom display elements. I should be able to import display elements (line chart, bar graph, etc.) or develop on my own.
Event-based refresh. All the display elements should have an option to refresh itself based on events than on a refresh time period.
Responsive. The display elements should render correctly on different browsers on devices of different aspect ratio e.g. laptop, desktop, 42" LED TV, etc.
Internationalization support. All display text and locale elements (date, money, etc.) should be rendered via a 'bundle' or at least be programmable for me.
Hand-held friendly. The platform maybe provides a SDK that allows handling of device gestures for rendering display. For example, pinch to zoom, swipe, etc.
Ideally, an open source product backed by commercial support would be great.
Most options that I have seen, do not have an easy drag-drop feature. For example, d3.js has some really amazing visualizations but, probably requires non-trivial development effort. I checked out Freeboard too, but, I am not sure if it can extend to custom data sources and widgets. Splunk looks good but I am not sure how extensible it is.
So, what are your suggestions?
I would highly recommend Splunk for your case. I have been working with it for quite a while now and have seen numerous capabilities. It is not true that it is not responsive; most companies demonstrate Splunk dashboards on wide screens, projectors, mobile phones, etc.
Using custom display elements couldn't be easier. There is a variety of options of charts,graphs,stats tables and others,plus you can work with various programming language from simple xml and html to javascript (d3 libraries are supported for D3 visualizations) for more complex applications. You can add drilldowns to your panels, time pickers, search boxes, all by using its GUI interface.
You can easily configure it to "auto-run" when new events are available by choosing one of the real time options , e.g. 1-minute-window, 5-minute-window,etc.
You will be impressed how easy is to "form" your data, as Splunk recognises and extracts timestamps and time zone data automatically (of course you can apply your own settings in any case). It is also capable of recognising different data sources (like json, syslog, database logs, etc) providing the proper configurations for line breaking, fields extractions, and other options, allowing regex replacement too.
Imho it is the easiest and most robust way to visualise your data quickly allowing a lot of space for customizations.
Related
I am developing a front end GUI that people use to communicate with equipment that we manufacturer and sell. Our equipment (black box) talks over ethernet to our GUI: reporting status, provides the user with controls to configure parameters within the black box, queries diagnostic data, etc.
The GUI needs to be used by engineering for debugging purposes in development of our black box, used in production to test the equipment against customer requirements, and used by the customer to interface with the black box at a high level. The challenge is the engineering diagnostic GUI elements confuse the people using the GUI in production, and the customer wants a very streamlined, simple GUI which isn't of much help for engineering or production.
I don't want to design three separate GUI's as there is so much overlap between these programs at the lower-level, in addition, to creating a software configuration control nightmare. Is there a model or strategy for designing a GUI for multiple applications or multiple end-users? Any suggestions or best practices?
User-centered design has several strategies for tackling this type of problem. The full-blown option is to use personas to determine how similar the needs of debuggers, testers and users are, and how many user groups you truly have. Personas are based on research with users. You can gather information by listening in on support calls or observing your engineers at work. Maybe you have three user groups with distinctly different goals, background, tech-savviness and needs, but maybe you only have two distinct groups, where testers and debuggers would be content with the same UI, but end-users would find it too technical and too confusing.
Knowing what you know about how your internal users work, you might be able to justify employing the UI design pattern "Extras On Demand". The strategy is to present by default a streamlined and simple UI that is relatively basic, with full functionality available one click away. Think of the difference between simple search and advanced search. Simple search is generally shown by default, with advanced search just a click away.
Determine which tasks are appropriate self-service tasks for end-users and design an interface that makes it easy to accomplish those self-service tasks. Use terminology that your end-users use on support calls. Put constraints on their input, so they can only enter valid values. Keep them out of trouble by loading default values.
You may find that your expert users find it annoying to click the "show me more" link, or you may find that they don't mind, because they use the simple UI for quick tasks and don't always go to the full-featured UI for every task.
I am developing an application which requires real time collaboration. I am planning to use a cshtml text area to allow the users to type. Is real time collaboration achievable using a text area?
Also, I have read a little about operational transformation. Can it be achieved using .net framework?
I am just a beginner and do not have much knowledge about algorithms that will help me achieve real time collaboration. Any help will be appreciated.
Thanking you in advance.
ShareJS is free, uses node.js to achieve what you are looking for, and implement a OT2 algorithm
For .Net there is no Operational Transformation out-of-the-box, however you can take a look to BeWeeBee SDK, (though is commercial software)
I am developing an application which requires real time collaboration. I am planning to use a cshtml text area to allow the users to type. Is real time collaboration achievable using a text area?
This really depends on the user experience you want to deliver. If you want to lock the textarea for one user whilst the other is editing then that might not be the nicest user experience but it's most definitely relatively easy to do.
If you want two or more users to be able to simultaneously edit the same text area then sending data_changed events between the users is reasonably easy using a realtime web technology but you'll need to handle the synchronisation of the textarea content between the users and handle collision detections. The user experience for this is also much more complex.
Also, I have read a little about operational transformation. Can it be achieved using .net framework?
I had to look up operational transformation and it partially answers the question about the user experience - it's non-blocking. Having skim-read the wiki doc I'd ask the question: why would it not be possible? You can communicate instantly between all users/application to notify them of changes (as stated: using a realtime-web technology) so you just need to implement and manage all the clever algorithmic stuff :) (I don't know if there's a component that will manage that for you)
For self hosted .NET realtime web technologies you might want to look at SignalR, XSockets, SuperWebSocket or WebSync.
If you want to get up and running a bit faster you might look at a hosted realtime web technology
This is an old question but there is some additional information that might be helpful. As previous answers mention, there are several options out there for text based data synchronization. Many of them based on Operational Transformation or CRDTs. These approaches are implemented in SDKs in many languages. (Full disclosure, I happen to be one of the authors of the Convergence).
However, you also need to take into account some of the other features required to implement collaborative editing. For example:
Presence: Who is there editing with you?
Collaboration Awareness: Things like shared cursors and selections?
Local vs. Group Undo: What happens when a user hits control-z? Are they undoing the last action they did, or the last action the other remote users did?
History: Knowing who did what is more complicated when multiple people are editing at the same time. When one user hits save (if there is a save) they may be saving actions performed by another user.
These are just a few examples of things to consider in collaborative editing beyond just data synchronization. When these questions come up, most answers focus solely on the data synchronization framework. At Convergence Labs, we help people work design collaborative editing applications and have implemented dozens of such apps. We have seen many times over that if all you put in is data synchronization, the user experience turns out to be pretty poor and users will not like the application.
So, in selecting a framework, look for something that helps you implement some of the other facets of real time editing, or at the least be prepared to implement them yourself on top of whatever tools you select.
I have been playing around with php-gtk recently and in the past I have experimented with Java to make GUI 'hello world' apps.
However both these types of applications have had a bit of a clunky (almost childish) look and feel to them. I cannot deny that they are handy for making apps for in-house use (and I totally respect the amount of community effort that goes into these projects). But I would not necessarily be proud to sell it as a commercial application with a price tag of, say, £450 or £1,000.
If I wanted to make an application that had the look and feel of, say, Firefox for Windows, or Adobe xyz, what GUI/language should I use?
Is the 'professional sheen' or smart look and feel 100% down to the designers or is it the case that, no matter how good a designer is, picking the right GUI framework is essential to get that look?
There are a few aspects to having a polished UX for a piece of software.
Using the most native framework for the platform. Win32/WPF for Windows, Cocoa for Mac etc.
Application's visual artefacts are coherent - this includes images, graphics, toolbar icons etc.
Following the platforms guidelines and best practices.
It's overlapping a bit with Igor's reply, but here's my take:
Native Control Look - UI controls today have a rather complex appearance. There are many visual cues we instinctively derive from them, and even if it's a white rectangle with some frame, with the wong shadow it looks strangely out of place. A context menu often doesn't just open today, it slides in from some direction, or fades in.
Native Control Behavior - Even more complex than UI, there's a lot of detail to behavior: different context menus depending on click position, different "hot" areas when selecting or dragging items, keyboard shortcuts, etc.
Attention to detail - There's a lot of consistent UI behavior to discover on any platform. Just the way arrow keys work in a tree control WRT selecting, opening and closing nodes.
Just look at Windows: Most non-native toolkits get the basic keyboard navigation wrong - Arrow keys, Home, End, PgUp and PgDown, behavior modified with Ctrl, extending selection with Shift gives up to 32 behaviors. Copy & Paste is traditionally with Ctrl+C/Ctrl+X/Ctrl+V and Shift+INS,Shift+DEL, and missing. Mouse double click often selects a word, mouse triple click sometimes a sentence, line or paragraph.
Response time and Muscle Memory - There are, basically, two UI operation modes:
act-look loop, where you wait for the response before deciding the next step,
playback from muscle memory, which is much faster and requires less mental processing ressources.
There are, however, two requirements for that: response must be uniform and "instant", and the next action must be registered correctly immediately (at least within 10 ms)
Often enough, with non-native toolkits, this gets hard by the response lagging behind one or two actions (the mind locks on the discrepancy), and by toolkits that take 50ms or more to show a menu, in which time a click isn't registered as intended.
A polished UI takes long to get right - A good control library can solve most of the per-control issues, but there's some final 10% taking 90% of the time, and you have control interactions. You have to try different approaches, you have to expect users with FPS-trained reflexes, you have to try all kinds of workflows.
Cross-Platform toolkits can't get it perfectly right - they are stuck between a rock and a hard place: They can opt for internal consistency independent of the platform, or being consistent with platform they currently run on. To get it right, the latter often requires platform-dependent code in the calling code, the actual thing you are trying to avoid.
Always try to use the GUI framework that's used by your desktop environment. .NET's libraries are probably the best for creating Windows apps. GTK+ is always the best on GNOME, while Qt works well on KDE - even though all three work on each other's systems, their visual appeal decreases with their lack of visual integration.
The GUI API/language used is utterly irrelevant to UI design, although some APIs make it easier or fasterto implement.
Good UI is about:
Good graphic design/artwork (visual balance and symmetry, complementary colours, visually 'pleasing' shapes and layouts, visual consistency within your app and with the other apps around it - consistent positioning, sizes, gaps, colours, etc)
Understanding the user's workflows and making what they want to do easy and intuitive. This often means implementing 3 or 4 ways of achieving the same action (e.g. "Copy and paste" can usually be achieved by: main-menu->copy/paste, context-menu->copy/paste, ctrl+c/v, button:copy/paste, drag-and-drop)
Keeping everything simple. Remove as much as possible to cut the UI back to just what the user needs and no more.
Being intuitive and not surprising the user. Controls should look like the controls the user knows, work like the controls the user knows, and be located in the places a user expects given their previous experience with the computer.
Following the conventions (position OK/Cancel buttons in the standard locations, use the OS-defined colours for highlighting selected objects etc)
To get this, you need to look at lots of "good" applications and dissect what makes them good. Get a good artist/graphic designer to draw you good icons etc. And spend a lot of time thinking about the user's workflows.
Make sure you separate the business logic from the UI - this will allow you to re-skin the app easily to improve the UI. And usually the data the program needs is not related to the way the user needs to use the application - don't be tempted to just expose your x,y,z variables in editable fields! UI is the layer that hides your implementation and makes it usable!
I don't care for the way Java application GUIs tend to look using the usual toolkits. If you like the way Firefox looks, you might look into XUL and the GUI framework shared by most Mozilla applications. Komodo Editor/IDE use the same tools (along with several other applications). GTK is very powerful, and I really doubt it is what is preventing your applications from having that professional sheen. Keep exploring it's features, and rethinking the best way to display your components, and I'm sure you'll stumble upon an arrangement that feels better.
On the other hand, it isn't all about the toolkit. Good interface design is an art, and interfaces like Firefox have evolved through endless amounts of feedback. The best thing to do is talk to users and find out what will make them more comfortable using your application. I've found that software tends to look good when it is also functional.
I would recommend spending a lot of time in software that you find pleasant to use. Make notes of the way things are done, and look for commonalities among interface elements. Most software sticks to a pretty common set of principles that make using the software easier, and the more you explore the software you find appealing, the sooner patterns will start to emerge.
Good luck!
I'm a software developer, and I'm going onto a project now that involves implementing a website using ASP.NET (3.5 / 2008, using the Web Client Software Factory). I've been tasked at creating a UI / UX Design Document for the project, however I don't really know where to start.
I've been on one project in 3 years where there was a formal UI design document, which included layout and style guidelines/rules (e.g. the application has a header, navigation, etc., links must be colour A, buttons for positive actions must be on the right, etc. etc.). It was pretty useful in hindsight, I appreciated that someone went into that much effort too - even defining the CSS classes in the document. However, the doc was based on an existing application and conformed to the business' overall corporate identity.
The current project is a new project, which at the moment doesn't have clearly defined requirements (yes, I know... how do you design when there aren't many requirements... I digress). It is hard to know what functionality exactly will be needed. There are two different user types / personas, but no formal research will be performed on them for this document. Also, I'm not sure of the corporate identity, apart from that the business has some rules regarding use of their logo, which I'll only get further clarification on in a few days time.
So I'm slightly in the dark, throwing paint at a canvas, hoping I get a pretty picture at the end (if only I were Jackson Pollock).
What would you include in this document? It is aimed at the business (the client), as well as the developers. I can think of only the below:
Layout - header, footer, content, navigation
Styles - colour palette and styles of the different expected components
User Interactions - when a user performs an action and must wait they are notified by a modal dialog, validation is done using AJAX, navigation should be contextual, tasks should be performed with a minimum amount of clicking / navigation, etc. etc.
Has anyone got any experience in creating such a document, or any known, tried and tested process for UI design?
Thanks,
James
There' all sorts of elements that could be included in such a set of documentation:
visual style guidelines (colors, typefaces, sizes, icons, etc)
branding guidelines (corporate logos, colors, messaging, etc.)
copyrighting style guide (terminology, proper messaging, proper voice, etc.)
persona/demographic targetting
page layout guidelines
CSS guidelines/standards
JS guidelines/standards
use cases
accessibility issues
usability issues
example implementations
IA path flows
Wireframe components
etc.
I'd pick up this book if you can to give you a start on thinking about this:
http://www.amazon.com/Web-Anatomy-Interaction-Frameworks-ebook/dp/B002ZY5FCW/ref=sr_1_2?ie=UTF8&s=books&qid=1262983955&sr=8-2
Along with all the other obvious components of your planning document, it would be a good idea to sketch portions of the UI along with an accompanying narrative of the specific use cases illustrated.
I've had issues in the past when attempting to communicate UI ideas. It is often useful to make sketches of dialog boxes and sequences of actions. If those sketches look too "real", then there is a tendency for them to become the spec for the final product.
To mitigate this, I've been playing with Balsamiq Mockups. It has the nice property that it is an editable back of a napkin, and deliberately renders all objects and screen layouts with a hand-drawn feel. I like the results I've achieved with it for small, internal projects. I haven't (yet) had the chance to use it for a large project with many external stakeholders.
The Wikipedia article for Human Interface Guidlines has some great links that I was going to suggest. Some of them may have far more information than you require, but they should give you a good idea as to what types of things you should add.
I have always found Apple's guidelines very complete and useful, but they are definitely very complete and require a lot of reading.
UX documentation is a critical part of the UX design procedure. It functions as a connection, providing context to the product’s lifespan from the initial concept to the present iteration.
Good UX documentation is straightforward yet lean. It should be favorably attentive, actionable, and purposeful. UX documentation is a functional document of a product’s journey from the beginning to the current release. This documentation is important for several reasons:
Organizational memory
Onboarding & handovers
Single source of truth
Fosters better communication & collaboration
A valuable R&D and IP
There are many more technologies and tools available to build the front end for an application.
Which is the best technology/tool/platform available using which I can build a better GUI, by which I'll be able to build a nice looking as well as an efficient GUI?
Definition of "better" includes factors such as efficiency,user friendliness,better content control mechanism, navigation and many more.
I know this is a question about which GUI toolkit you should use, but your first technology for producing a user-friendly UI is pen and paper. Sketch out some mock-ups. Draw buttons and menus on construction paper, cut them out, and glue them together. Then try your mockups on about a half-dozen people. You'll quickly find out what makes a good UI.
It doesn't matter how good the UI looks or whether it uses the latest snazzy effects -- if your users can't figure out how to use it, they'll go elsewhere. You need to learn what works for your target audience before you write a single line of code.
Read Don't Make Me Think to learn how to make mock-ups and do user testing.
If' you're tracking an IP address, you'll definitely want to create your GUI Interface in Visual Basic.
Use the .NET framework in Visual Studio 2005/2008/2010 Studio. I haven't developed in any other environment, but I have been able to create nice looking apps in this IDE / Framework.
"Best" depends on what your evaluation function is.
For ease of development, and high quality UI, in a non-web based app it's hard to beat C#/VB or any other .NET language and environment for a windows-based app. Depending on the quality of the UI, MPF will give you greater flexibility and control, whereas windows form will make it easier to develop.
Having used Windows Presentation Foundation for a while now i would highly recommend it. There is a pretty big learning curve and, to be honest, MSFT should have included some controls (the datagrid being the biggest one) that were not included by default (but will be in .NET 4.0). Where WPF and XAML exceed is providing a foundation from which you can build just about anything. You can style ANY part of ANY control and build your own composite controls from scratch. A lot of thought went into binding and value converters and once you get used to the declarative nature of XAML you wont want to turn back. The company I work for has been using it for a couple of years now and the difference between the GUIs we used to develop (mainly winforms and asp.net) and what we develop now are night and day in terms of both look-and-feel and functionality. My two cents anyway...
It depends.
What device will the GUI be used on, hand held, PC, Mac?
What platform Windows, Linux, Web?
What kind of application will it be, accounting, email client, web application?
What audience will be using the application (a GUI aimed at a child may be different than one aimed at an adult)?
All of these things must be taken into account before even starting to formulate an answer to your question.
You have several choices for developing a GUI.
first, if cross platform is an issue consider using Java or Python.
you can also use Adobe AIR and develop the gui in Flex.
If you direct the product to windows only users .NET WPF is the best solution, with a very rich set of control and examples.
You can also use .NET with mono for cross platform compatibility, but WPF isn't currently supported.
Desktop, Mobile, Windows, Linux, Database, OpenGL: Nokia Qt. Wiht Python - PyQt development process is shortest and easy. Application containing all required python & qt libraries and modules is around 30MB with Inno Setup installation is 8MB and will work on Windows 2000 and newer for Python 2.6.x, Python 2.5.x based application will run from Windows 95 to Windows 7.
I think all the attributes you list -- efficiency, user friendliness, etc -- are attributes of a good design rather than a good toolkit. Just about any toolkit can be used to meet those goals. I think the question might be different if you were asking about eye candy, fancy multi-media, etc. There are definitely some toolkits that do that better than others.
If you're interested in usability first (and it sounds like you are), focus on the design then pick whatever toolkit meets your current abilities and can handle your design. For example, if you require 3D images that might narrow your choices; likewise if you need to show videos, that will influence which toolkits you can choose from.
So, start with a good design. From that, create a list of requires for the toolkit -- rich editing controls, video, 3D, etc. And then look for a toolkit that provides what you need.
The best toolkit in the world won't make up for poor design.
Personally after having used Win32, Forms and WPF then going to Mac/iPhone GUI development, I very much prefer the flexibility and high quality of visuals in the Mac/iPhone GUI.
One of the most useful examples is the fact that in NSTable/UITable controls (ListViews or similar in Windows), every cell is a fully customisable View (a Control in Windows).
Where in a ListView you have very little customisation for each cell/item in the view since you only provide details, not an actual control, an NSTable/UITable asks you for a table cell which you can add anything to, such as buttons, switches and image views.
Mac OS GUI development to me is a LOT more flexible and more consistently flexible in that regard. Everything is a View so I can my own contents to anything.
Have you considered Silverlight?
It can be used to create internet applications, but it can also be run out of browser to create desktop applications. It's has significant overlap with WPF though there are differences which might catch you out when swapping from one to the other.
Expression Blend 3 is a very good visual designer and the code it produces is quite efficient.